草庐IT

convert-canvas-image

全部标签

javascript Canvas 检测点击形状

我对javascript中的点击功能有疑问。这是我的代码:varcanvas=document.getElementsByTagName("canvas")[0];varctx=canvas.getContext('2d');BigCircle=function(x,y,color,circleSize){ctx.shadowBlur=10;ctx.shadowColor=color;ctx.beginPath();ctx.arc(x,y,circleSize,0,Math.PI*2,true);ctx.fill();ctx.closePath();};varbigGreen=newB

javascript - 为 svg :image 设置圆 Angular

我正在尝试使用d3.js为ssvg:image(嵌入在SVG中的图像)制作圆Angular。我找不到如何正确设置图像样式的方法,因为根据W3C规范,我应该能够使用CSS,但较窄的边框和圆Angular边缘对我来说都适用。提前致谢。vis.append("svg:image").attr("width",width/3).attr("height",height-10).attr("y",5).attr("x",5).attr("style","border:1pxsolidblack;border-radius:15px;").attr("xlink:href","http://www

javascript - canvas 已被跨域数据污染

我正在编写脚本(或一起编辑和破解东西)来编辑页面上图像的外观。我知道javascript的基础知识,但这是我第一次看Canvas。多多包涵我收到这个错误:无法从Canvas获取图像数据,因为Canvas已被跨源数据污染。所以这是我的代码片段抛出错误:varcanvas=document.createElement('canvas'),context=canvas.getContext('2d'),height=img.naturalHeight||img.offsetHeight||img.height,width=img.naturalWidth||img.offsetWidth||

javascript - 带返回值的 image.onload 函数

我有一个JS函数,其中计算了一个值并且应该返回该值,但我每次都得到undefined但是如果我console.log()结果在此它起作用的功能。你能帮忙吗?functiondetect(URL){varimage=newImage();image.src=URL;image.onload=function(){varresult=[{x:45,y:56}];//Anexampleresultreturnresult;//Doesn'twork}}alert(detect('image.png')); 最佳答案 值已返回,但不是来自d

javascript - canvas.getContext() 不是函数

目前正在研究如何将Coldfusion与Canvas进行交互。目前,由于javascript错误“canvas.getContext('2d');不是函数”,我被卡住了。Canvas必须位于div内:这是用来生成图片的javascriptvarcanvas=$('#svgbasics').svg('get').toSVG();varcontext=canvas.getContext('2d');varstrDataURI=canvas.toDataURL();Canvas2Image.saveAsPNG(canvas);项目的附加信息(如果需要):使用了以下库:1.7.2/jquery

javascript - 使用 fabric js 调整 Canvas 大小

这个问题在这里已经有了答案:CanvaswidthandheightinHTML5(3个答案)关闭8年前。该应用程序允许用户保存设计并发布,以便其他用户稍后查看。原始Canvas以width=700和height=600的比例保存。但是在显示Canvas时,我想调整Canvas的大小以适应(350,300)的尺寸。原来的一半。但是,如果我直接应用这些尺寸并加载宽度setWidth()和setHeight(),它会以原始比例加载。我只想显示新尺寸的Canvas。

javascript - 从视频帧在 Canvas 中绘制图像改变色调

我写了一个简单的脚本,从视频中提取一帧并将其绘制到Canvas上。我的问题是视频和绘制图像之间的颜色在变化。我将结果放在原始结果旁边,以便于查看。原来的在左边。顺便说一句,它在chrome浏览器上似乎更明显。我在OSX上进行的所有测试。这里是一个片段,左边是Canvas,右边是视频://Getourmaskimagevarcanvas=document.querySelector(".canvas");varvideo=document.querySelector(".video");varctx=canvas.getContext('2d');functiondrawMaskedVi

javascript - 有javascript机制修改Image的EXIF元数据信息吗?

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭7年前。Improvethisquestion我正在寻找一种JavaScript机制来修改图像EXIF元数据信息,我发现有很多JS库允许我检索EXIF信息,但没有一个可以修改。我想修改图像的EXIF方向信息,然后保存它。

javascript - Canvas 和 requestAnimationFrame 的高 CPU 使用率

我在递归调用requestAnimationFrame时遇到高CPU使用率(30到40%),有没有人有降低它的好策略?简单的例子:varcanvas=document.createElement('canvas');canvas.width=100;canvas.height=20;varcanvasContext=canvas.getContext('2d');document.body.appendChild(canvas)varrafId;functiondrawLoop(time){canvasContext.clearRect(0,0,100,20);canvasContex

javascript - 使用 JavaScript 将 Canvas 转换为图像

这个问题在这里已经有了答案:Whydoescanvas.toDataURL()throwasecurityexception?(10个答案)关闭9年前。我想用JavaScript将Canvas转换为图像,当我尝试canvas.toDataURL("image/png");时出现以下错误SecurityError:Theoperationisinsecure