我正在使用glfx.js来编辑我的图像但是当我试图使用该toDataURL()函数获取该图像的数据时,我得到一个空白图像(宽度与原始图像的大小相同).
奇怪的是,在Chrome中脚本运行完美.
我想提到的是canvas使用onload事件加载图像:
img.onload = function(){
try {
canvas = fx.canvas();
} catch (e) {
alert(e);
return;
}
// convert the image to a texture
texture = canvas.texture(img);
// draw and update canvas
canvas.draw(texture).update();
// replace the image with the canvas
img.parentNode.insertBefore(canvas, img);
img.parentNode.removeChild(img);
}
我的图像的路径也在同一个域上;
问题(在Firefox中)是我点击保存按钮.Chrome会返回预期的结果,但Firefox会返回此信息:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
... [ lots of A s ] ...
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAzwD6aAABkwvPRgAAAABJRU5ErkJggg==
什么可能导致这个结果,我该如何解决？
在客户端独立的JS应用程序中,我正在努力实现它,所以我可以在画布上调用toDataURL(),在画布上我绘制了一些由URL指定的图像.即我可以在文本框中输入我要在画布上绘制的任何图像(托管在,例如,imgur)上的URL,单击"绘制"按钮,它将在画布上绘制.最终用户应该能够将他们的最终渲染保存为单个图像,因为我正在使用toDataURL().
无论如何,直到他们真正解决了令人讨厌的"操作不安全"错误(哎呀,你要告诉最终用户他们可以做什么,不能做他们自己的数据？)我按照一个解决方法说要添加图像到DOM并将其crossOrigin属性设置为"Anonmyous",然后将其绘制到画布上.
这是我的代码的完整工作简化版本(但实际上会有更多功能):
<!DOCTYPE html5>
<html>
<head>
<style>
#canvas {border:10px solid green;background-color:black;}
#imgbox {border:2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width=336 height=336></canvas>
<br><br>
<input size=60 id="imgbox">
<input type="submit" value="Draw" onclick=draw()>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("imgbox").value;
img.crossOrigin = "Anonymous";
context.drawImage(img, 40, 40);
}
</script>
</body>
</html>
如果没有该img.crossOrigin = "Anonymous";行,我可以输入http://i.imgur.com/c2wRzfD.jpg文本框并单击绘图,它会起作用.然而,只要我添加该行,整个事情就会破碎,甚至根本不会被绘制到画布上.
我需要更改什么来解决这个问题？我真的需要能够为最终用户实现保存最终图像的功能,并且编写html5规范的人故意介绍了这个bug,这非常令人讨厌.
后台设置
我有一个Web应用程序,处理从一组其他图像创建图像.我选择这样做的方法是通过读取一组图像并将它们放在HTML画布上.然后,我将每个画布作为jpeg导出到第三方API toDataURL,并将其转换为Blob.我面临的问题是,我有很多这些画布都将数据导出为jpg,并且消耗了大量资源.当每个画布尝试调用时,应用程序会变慢并变得无响应toDataURL.
题
我发现调用画布toDataUrl()或者toBlob()可能非常慢,特别是对于大画布尺寸.我想利用Web worker的多线程特性.
首先,我尝试传入canvas对象但是抛出了一个错误.事实证明,对象是一个问题,它们似乎要么被转换为字符串,要么在无法克隆时失败.无论哪种方式,我发现传递上下文的图像数据确实有效.数据以原始RGB值的形式传递,作为Uint8ClampedArray画布上下文的方法getImageData().
Main.js
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var worker = new Worker('myWorker.js');
worker.postMessage({
image: context.getImageData(0, 0, canvas.width, canvas.height)
});
myWorker.js
this.onmessage = function(e) {
// GOAL: turn e.data.image into an image blob or dataUrl and return it.
// e.g. this.postMessage(new Blob([e.data.image.data], {type: 'image/jpg'});
}
我认为归结为知道如何将Uint8ClampedArray包含RGB信息的转换为jpg/png数据.
我认为这可能有用的原因是我认为getImageData只是从画布上下文复制现有的数据结构,因此没有那么昂贵toDataUrl.我在调用类似于下面代码块的内容时捕获了cpu配置文件:
var image = context.getImageData(0, 0, canvas.width, canvas.height)
var …我有一个Fabric.js原型,人们可以将照片,文本和地图加载到画布中.当它们完成后,我希望它们能够将画布保存为图像.我尝试过使用这个标准:
canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);
但是它说画布是tainted- 我认为是因为图像(上面的方法只是文字时才有效).错误是:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
我可以使用Fabric的内置方法保存为SVG:
var canvasSVG = canvas.toSVG();
$('#canvasContainer').replaceWith(canvasSVG);
但我宁愿拥有PNG/JPG.有任何想法吗？
这是关于画布序列化的Fabric.js文档.
我正在使用javascript和html画布来调整jpeg图像的大小.调整大小后,我将其canvas.toDataURL用作锚标记中的href属性,以便提供用户可以下载已调整大小的图像的链接.
这可以很好地达到某个图像大小.
似乎不同的浏览器对数据网址的大小有不同的限制,如下所述:https: //developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs
在chrome中,当我超过数据URL大小限制时,单击下载链接时没有任何反应; 没有错误或任何事情(据我所知).
有没有办法以编程方式检测数据网址是否过大？也许某些浏览器事件会告诉我点击下载链接是否失败？
理想情况下,我想检测下载是否成功.当数据网址太大时,我想向最终用户显示一个解释,说明如何右键单击图像并选择"另存为...",这似乎总是有效.
更新1:
看起来使用canvas.toBlob是目前最好的解决方法.这是api文档:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob.
这是一个jsfiddle,演示了当使用toDataURL更大的画布时,锚点href下载链接如何失败,但toBlob似乎有效:
https://jsfiddle.net/upgradingdave/c76q34ac/3/
以下是一些相关的stackoverflow问题: canvas.toDataURL()下载大小限制
我正在构建一个设计工具来创建完全可定制的照片产品，如相册。我使用 firebase（数据库和存储）和 angular4 等技术。为了将 google 照片与我的网络应用程序集成，我使用了 google 照片 api。当我尝试使用 html canvas (toDataUrl) 编辑用户的照片时，出现以下错误：
“对 '...' 图像的访问已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头存在于请求的资源。”
我知道这意味着什么，但我找不到任何解决方案来编辑用户的照片并将它们用于打印目的。有人可以帮我吗？
我使用此代码在Javascript中保存图像:
window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream");
代码有效,但保存的文件没有任何扩展名,我必须手动重命名.
我的问题是如何将扩展放在最后？
谢谢.
需要使用HTML5画布生成大约约20k的.png图像.不幸的是,在使用toDataURL()方法创建.png时,您无法像使用jpegs那样指定质量.
任何解决方法的想法？toDataURL似乎是从Canvas生成图像的唯一方法,而canvas似乎是没有服务器交互的图像处理的最佳工具.感谢任何建议.
所以我正在尝试为我正在构建的OpenLayers 3应用程序创建打印映射函数.我知道他们的例子,但每当我尝试使用它时,我都遇到了可怕的污点画布问题.我已经阅读了整个互联网并且遇到了人们首先正确设置CORS(完成和完成)但也要做:
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
以上描述了在这里.
我的问题是,我以前从未真正使用过toDataURL(),而且我不确定如何确保正在创建的图像在被激活之前正确设置了crossOrigin属性:
Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
有什么想法吗？
我见过这个.我的问题是他们如何将其纳入一个有效的功能.就像是:
var printMap = function(){
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
img.onload = function() {
var canvas = document.getElementsByTagName('canvas');
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
};
};
目标 - 使用客户端：
将动态 SVG 绘图（使用 d3js 创建）转换为可下载的 PNG 图像并使用 Internet Explorer 工作。
完成：
在 Chrome 中实现，没问题。一旦我有了 PNG DataURI，它就可以轻松转换为可下载的 PNG blob。
不幸的是，在 IE 中运行相同的代码会产生 SecurityException，当我尝试将画布转换为 PNG DataURI ( canvas.toDataURL )时它会失败。
显然这是一个活跃的IE BUG，我在 StackExchange 上发现其他人也有同样的问题。我相信这与应用于来自其他域（并在画布中绘制）的图像的 CORS 限制有关，但我的 SVG 源自本地页面。
想法
想知道原因是否与我为IMG 元素呈现的 SVG 绘图生成初始 DataURI ( data:image/svg+xml ) 的方式有关。
我尝试了两种替代方法来生成image/svg+xml，base64 和 charset=utf8，但它们没有解决遇到的问题。所以想知道是否是SVG的内容，目前SVG绘图中没有图像。
参考代码：
var rawSvg = new XMLSerializer().serializeToString(svgElement);
var img3 = new Image();
document.body.appendChild(img3);
var canv = document.createElement("canvas");
var canv_ctx = canv.getContext("2d");
img3.onload …canvas ×10
todataurl ×10
javascript ×8
html5 ×4
cors ×2
base64 ×1
fabricjs ×1
firefox ×1
getimagedata ×1
image ×1
openlayers-3 ×1
png ×1
svg ×1
web-worker ×1
webgl ×1