在画布上绘制多个图像。但是toDataURL返回空白
在画布上绘制多个图像，但是toDataURL返回空白的问题可能是由于以下几个原因导致的：
- 绘制图像时的异步操作：在绘制图像时，可能存在异步操作，导致toDataURL方法在绘制完成之前被调用，从而返回空白。解决这个问题的方法是使用回调函数或者Promise来确保绘制完成后再调用toDataURL方法。
- 图像加载延迟：如果绘制的图像是从远程服务器加载的，可能存在网络延迟导致图像加载未完成就调用toDataURL方法，从而返回空白。可以使用图像的onload事件来监听图像加载完成后再调用toDataURL方法。
- 绘制图像的尺寸问题：如果绘制的图像尺寸过大，可能会导致toDataURL方法返回空白。这是因为toDataURL方法有一个最大尺寸限制，超过限制的图像无法转换为DataURL。可以尝试缩小图像尺寸或者分块绘制图像来解决这个问题。
- 安全策略限制：某些浏览器可能存在安全策略限制，禁止跨域绘制图像并获取其DataURL。这种情况下，可以尝试将图像上传到同一域名下，或者使用服务器端代理来获取图像的DataURL。
总结起来，解决toDataURL返回空白的问题可以从以下几个方面入手：确保绘制操作完成后再调用toDataURL方法、处理图像加载延迟、注意图像尺寸限制以及处理安全策略限制。
相关·内容
我在一个页面上工作，在那里你将能够在画布上绘制图像。你有6个图像选项，当你完成后，我希望人们能够保存他们的创作。
我使用drawImage在画布上绘制图像，但是当我使用以下代码时：
var canvas = document.getElementById("canvas");
window.open(canvas.toDataURL("image/png"));
它不会在DataUrl图像上显示绘制的图像。
如何确保画布上绘制的图像在toDataURL提供的图像中也可见
浏览 0提问于2012-05-14得票数 0
回答已采纳
在我的javascript中，我将画布绘制到画布上，然后我希望画布转换为png并显示在div中，其中包含以下代码：
var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
var imgObj = new Image();
imgObj.src = dataURL;
imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };
当我在绘制画布后直接调
浏览 1提问于2013-01-05得票数 0
回答已采纳
我想绘制一个表格到画布，然后将画布保存为图像。(需要创建pdf)
有趣的是，表格显示在画布上，但我不能用.toDataURL转换它，它只是返回一个空白图像。
控制台中没有警报。
function getImgDataTable(tableContainer) {
var tableArea = tableContainer.getElementsByTagName('table')[0].parentNode;
var doc = tableContainer.ownerDocument;
var canvas = doc.createElement(&
浏览 6提问于2014-02-25得票数 1
我正在开发一个应用程序，其中在HTML5画布上创建/编辑图像，然后将其保存到文件存储/云中。问题在于“储蓄效率”。保存空白画布时，会使用toDataURL()发送一个完全透明的空白PNG。检测空白PNG的一种方法是在单击任何编辑/绘图功能时切换布尔值，并在清除屏幕时重置该值。
然而，这样的方法不是万无一失的，因为用户可以在点击绘制/编辑功能之后保存图像，而不绘制任何东西。有没有一种更本机的方法来检测画布返回的二进制字符串是否在浏览器上打开后发生了变化？或者其他一些方法来确保在客户端检测到空白的透明PNG？
浏览 0提问于2011-11-03得票数 13
回答已采纳
2回答
我有一个页面，用户可以在画布上绘制，并保存到服务器上的文件图像。画布具有默认的黑色背景。在使用toDataURL()函数提交画布图像的data URL表示之前，有没有办法检查用户是否在画布上绘制了什么？因此，如果用户没有在画布上绘制任何东西(它将是一个黑色背景的空白画布)，图像将不会在服务器上创建。我应该遍历画布的每个像素来确定这一点吗？下面是我目前正在做的事情：
var currentPixels = context.getImageData(0, 0, 600, 400);
for (var y = 0; y < currentPixels.height; y += 1)
浏览 2提问于2010-05-27得票数 0
我正在画布上绘制新的图画，特别是时间，它保存了canvas.toDataURL()的画布图像。
下面是我用来将图像的urls保存到数组中的代码：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var images = [];
function foo(){
/* do my work */;
images.push(canvas.toDataURL());
/* clearing canvas to get
浏览 0提问于2016-04-10得票数 2
1回答
我正在努力在画布上画一幅画。到目前为止，我已经将画布中的imagedata插入到数据库中。问题是，当我尝试创建数据的图像并稍后在画布上绘制它时，它不会绘制相同的图像，可能只绘制了一些像素，而其余的则是空白的，就像什么都不应该绘制一样。
我像这样获取图像数据：
var CanvasData = document.getElementById('canvas');
CanvasData = CanvasData.toDataURL("image/png");
然后像这样将图像绘制回画布上(数据存储在数据库中)：
var result = xmlhttp.respo
浏览 0提问于2012-05-10得票数 1
回答已采纳
去。
打开控制台并编写：
`
var canvas = $("#mandelbox-canvas")[0];
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData);
复制数据URL并粘贴到中。
为什么图像是空白的？我怎么才能解决这个问题？
我已经尝试过的东西：
。也就是说，这个代码：
var canvas = $("#mandelbox-canvas")[0];
canvas.getCon
浏览 3提问于2017-12-17得票数 0
回答已采纳
我想要做的是绘制一个我已经保存在本地的图像到画布上。然后，我想将该画布转换为png图像。图像加载到画布上，但我创建的png图像是空白的。有人知道怎么解决这个问题吗？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="" id="canvasImage" />
<canvas id="canvasId" width="160" height="145">&
浏览 1提问于2014-11-28得票数 0
我已经创建了一个使用HTML5画布元素的web应用程序，允许用户绘制各种形状、颜色和线宽。他们还可以上传图像，将其绘制到画布上，然后在上面绘制，作为注释图像的一种方式。
我的挑战是使用.toDataURL()将画布的全部内容保存为图像。据我所知，这只能捕获画布的大小。在较小的设备(手机)上，保存的图像最终会变得非常小。下面是我正在做的事情，以获取画布上的内容：
var image = document.getElementById("drawingCanvas").toDataURL("image/jpeg"，1.0)；
image = image.replac
浏览 1提问于2015-12-18得票数 1
toDataURL的大小有任何限制吗？在iPad上，我尝试制作toDataURL(options)并制作一个新的图像。但是，如果options.width和options.height接近画布大小，则返回一个空白页。
浏览 0提问于2016-06-15得票数 2
回答已采纳
1回答
我正在尝试以类似于在中所做的方式生成我的kineticjs画布的图像。(尽管与示例不同，我的画布确实包含来自本地子目录的图像。)
然而，我知道以下几点：
toDataURL()方法要求绘制到画布上的任何图像都托管在web服务器上，其域与执行它的代码相同。如果不满足此条件，则会引发SECURITY_ERR异常。
但是，我要求能够在本地html页面上生成图像。是否使用toDataURL或任何其他映像生成方法来满足上述安全要求？
浏览 2提问于2013-09-14得票数 0
我现在做的事情如下：
我使用toDataURL方法存储画布的状态，并尝试使用drawImage方法在画布上绘制它。
下面是一个代码片段：
var lastState = states[10]; //states is an array that saves all the toDataURL of the canvas
var permCtx = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
permCtx.drawImage(img,0,0);
}
img.src=lastSt
浏览 1提问于2011-04-18得票数 2
我目前正在制作一个由flask托管的应用程序。
我正在尝试获取用户在我的画布上的绘图，然后为他们保存它，下面的代码是用来保存我的画布的：
$(document).on("click", "#savepng", function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
console.log(
浏览 1提问于2017-11-24得票数 0
1回答
给定javascript中的画布，保存到后端服务器的正常工作流程如下：
创建画布元素
绘制/修改画布
调用canvas.toDataURL()
将画布的base64表示上传到后端服务器(basic )。
由于对toDataURL()的调用可能非常慢，我想知道是否可以直接将图像字节上传到后端服务器，而不是使用toDataURL()的base64方式。
有什么想法吗？
浏览 1提问于2016-07-19得票数 2
回答已采纳
fabric.Image.fromURL(hc.toDataURL(), function(img) { // add image onto canvas Canvas.add(img); img.hasControls = false; img.hasBorders = false; img.hasControls = false; img.hasRotatingPoint = false; img.selectable =
浏览 4提问于2015-10-13得票数 4
回答已采纳
1回答
我正在实现一个递归方法，它接受图像数组并将它们绘制到画布中：
async drawImages(ctx, images): Promise<any> {
const img = images.shift();
const imgToDraw = new Image();
imgToDraw.src = img.src;
imgToDraw.onload = () => {
ctx.drawImage(imgToDraw, img.x, img.y, img.w, img.h);
if (images.length
浏览 1提问于2019-04-24得票数 0
回答已采纳
2回答
我试图在画布上绘制一个现有的图像，并通过base64对其进行编码。这是我的代码：
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
document.getElementById("Table1").appendChild(canvas);
var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("
浏览 0提问于2019-02-06得票数 0
回答已采纳
我尝试使用HTML5引入一个图像文件，将其绘制到画布上，对其进行一些操作，然后返回dataURL，这样我就可以引用这个新生成的图像。
下面是一个图像加载代码的快速示例：
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
c = document.ge
浏览 2提问于2012-12-15得票数 3
回答已采纳
我在画布应用程序中使用fabric.js，toDataURL方法正常工作，除非画布上有图像。当我向画布中添加一个图像并调用toDataURL时，它会显示一个空白页。
//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYC
浏览 12提问于2013-10-13得票数 3
回答已采纳
我在HTML5画布中创建了一个应用程序，用于裁剪图像。DOM中有3幅画布，一幅用于绘制线条，一幅用于原始图像，另一幅用于结果。
这是我使用的代码。
// copy image data to secondary canvas
var pixelData = ctx.getImageData(x-10, y-10, 20, 20);
var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = 20; tmpCanvas.height = 20;
var tmpCtx = tmpCanvas.getCont
浏览 2提问于2014-01-29得票数 0
我有一个画布与webGL绘图，由Blend4Web框架创建。
我尝试使用toDataURL()保存图像
image= $('canvas')[0].toDataURL();
除了iOS (iphone和ipad)，所有的平台都运行得很完美。
我知道webGL方面：，preserveDrawingBuffer是启用的。
此外，我知道iOS：的限制，但画布很小，即使是100×500px的图像也是空白的(它是0.05MP，限制是3MP)。
我使用toDataURL()在服务器上发送图形信息。
浏览 0提问于2017-10-30得票数 7
我把一张图像存储在火柴库里。我将图像加载到画布上以供绘制。它装得很好，我可以很好地利用它。但是，当我导出它时，我会收到以下错误：
错误DOMException:未能在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。
下面是导出中要测试的代码：
exportImage() {
let canvas = document.getElementById('baseLayer_myCanvas') as HTMLCanvasElement;
var image = new Image();
i
浏览 0提问于2018-02-22得票数 1
7回答
如何在画布中打开图像？它是编码的
我正在使用
var strDataURI = oCanvas.toDataURL();
输出是经过编码的base64图像。如何在画布上绘制此图像？
我想使用strDataURI并创建映像？这是可笑的吗？
如果不是，那么在画布上加载图像的解决方案是什么？
浏览 0提问于2011-01-23得票数 126
回答已采纳
1回答
我有一个正在使用HTML5画布的项目。我想尝试在一个基于瓷砖的网格中生成一个随机区域，每个瓷砖都是用context.drawImage()绘制到屏幕上的，您可以想象到，使用40x22网格时，这些网格的负载相当重。为了解决这一问题，我抓取画布并使用canvas.toDataURL()将其保存为图像，并在每个呈现循环中绘制该图像。
当我想对瓷砖结构进行主动更改时，就会出现问题，在这种情况下，在画布上绘制以更改瓷砖。每次我做一个更改，背景将再次保存为一个图像与canvas.toDataURL()，所以这些变化被保存到后台。但这会导致性能大幅下降(16 URLs )，同时不断生成数据URL。
我的问题
浏览 3提问于2015-10-05得票数 0
回答已采纳
2回答
我正在尝试使用chrome扩展来截取当前页面的屏幕截图，然后在上面绘制一些形状。在我对图像做了这些之后，我把整个东西变成了一个画布，就像我在上面画的div现在被烘焙到“图像”中一样，它们是同一个。这样做之后，我希望将画布转换回png图像，我可以使用它来推送到我拥有的服务，但当我使用canvas.toDataURL()来执行此操作时，它创建的图像源是完全透明的。如果我把它作为jpeg，它是完全黑色的。
我读到一些关于画布被“弄脏”的东西，因为我在它上面画了一个图像，这在Chrome中不起作用，但这对我来说没有意义，因为我之前已经让它起作用了，但是我无法使用我之前的方法。下面是不起作用的代码片段。
浏览 108提问于2016-01-28得票数 3
1回答
我正在使用Fabric.js。我在一个页面上有一个视频，我用画布元素将它转换成一个图像。使用canvas.toDataURL()可以在base64中给出正确的视频图像。
现在，我想将此图像的数据URI添加为同一画布的背景图像。我正在使用此代码来执行以下操作：
var img = new Image();
img.onload = function() {
var f_img = new fabric.Image(img);
canvas.setBackgroundImage(
f_img,
canvas.renderAll.bind(canvas), {
浏览 1提问于2018-06-04得票数 1
回答已采纳
我从JSON对象加载画布并调用toDataURL，但我需要一个回调，该回调将在画布加载后执行，因为如果画布上有图像，toDataURL函数将返回一个空白页面，因为它在图像加载之前被调用。
canvas.loadFromJSON(json);
// I need an event handler here which will be executed after canvas is loaded
var dataURL = canvas.toDataURL();
浏览 0提问于2013-10-13得票数 3
1回答
我有一个画布，在其中我用以下代码上传了一个图像：
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
浏览 4提问于2015-06-20得票数 11
Am使用画布预先绘制图片，然后我需要使用Canvas.toDataURL()将其保存到图像对象中，但在Chrome上，我得到错误"Uncaught :未能在‘HTMLCanvasElement’上执行'toDataURL‘：受污染的画布可能无法导出。“我需要这个在本地工作，但这意味着似乎不能在本地使用铬。所以问题是，即使在本地运行时，我也如何从画布中获取数据？这在firefox上运行得很好，但在Chrome上却不起作用。
浏览 4提问于2014-02-26得票数 3
回答已采纳
1回答
我想让一个图像正确缩放后，加载它与一个<input type='file'>上的虚拟点击，并通过绘制到画布上压缩它。当在img.onload中调用console.log()时，我发现它是在循环中运行的。将img.src = canvas.toDataURL("image/png")放在onload之外会产生一个空白图像，但不会出现循环。通过反复试验来移动东西并不是很有效，因为我在这里没有得到动态效果(即使我可以在重新缩放画布时重新绘制图像)。谢谢!
$('button.picture').on('click',func
浏览 2提问于2018-02-03得票数 0
1回答
我正在使用画布元素在Chrome中试用WebP图像格式。在MDN上，我看到toDataURL接受表示结果图像质量的第二个参数。
我想生成一个无损的画布元素的WebP图像。然而，如果我通过1来获得质量(意味着100%)，我就得不到完全相同的像素。它看起来像是在生成有损图像。
下面是一个测试用例：。绘制PNG图像时，某个像素的某个颜色的值为40。在画布本身绘制100%质量的WebP图像后，相同的值已更改为37。这对我来说并不是无损的，即使我通过了100%的质量。
有没有可能让toDataURL创建一个无损的WebP镜像，如果是的话，是如何创建的？
浏览 1提问于2012-07-14得票数 3
在获得画布的dataURL()之前，我试图在画布上绘制一个图像，但是返回的数据就像空的。
当我在控制台中检查它时，我看到字符串中有很多A：("data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=")
当我试图将画布附加到文档中时，也不会绘制任何内容，控制台中也不会抛出任何错误。
这里有什么问题？
这是我的代码：
var img = new Image();
img.src = "http://somerandomWebsite/
浏览 1提问于2015-10-01得票数 6
回答已采纳
2回答
我试着把图像加载到画布上，然后用文本下载。
我成功地将图像加载到画布上，并将其置于画布上。但是当我尝试下载带有文本的图片时--它是黑色的--经过多次尝试，我尝试了一下画布的"toDataURL“，发现它是空白的。
我不知道是什么问题，但我认为它得到的toDataURL之前，图像加载。
这是我的代码
function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.ge
浏览 4提问于2022-04-02得票数 -2
2回答
我正在获取一个SVG图像，将其绘制到画布上，并尝试通过toDataURL导出它，但Chrome向我抛出了DOM异常18安全错误。我知道问题是因为我使用数据URI方案( data : image / SVG +xml;base64)将SVG图像绘制到画布上，所以我猜浏览器认为它是跨域的(即安全问题)，但我想不出任何其他方法将SVG内容放到画布上。我不能托管它，因为SVG内容是动态的，在需要通过toDataURL导出之前要先处理它。
我通读了这里提出的其他一些类似的问题，但找不到任何解决我的问题的方法。
浏览 0提问于2012-12-12得票数 5
我试图将一个大型SVG (它的数据URL大约是750000到1000000个字符)转换为一个PNG，方法是将它的数据url传递到一个图像并放到画布中，但是图像只加载了SVG的1/4左右。
创建via：
var svg_xml = (new XMLSerializer()).serializeToString(svg),
url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = fun
浏览 1提问于2015-08-26得票数 13
3回答
我有一个canvas元素，我通过代码动态设置了它的背景。然后我使用草绘库()在画布上绘制。-这一切都有效。
然而，每当我尝试使用canvas.toDataURL(“canvas.toDataURL/png”)转换画布时，它可以保存画布绘图，但是不能保存背景。-我知道这是按设计工作的。
有没有办法把这两者结合起来呢？我一直在想，我可以在完成绘制后将图像src设置为背景src，然后尝试导出它，但是我不确定。有没有人有这方面的经验？
浏览 1提问于2014-04-10得票数 1
1回答
我正在尝试创建一个画布对象，我可以用它来创建一个图像(使用canvas.toDataURL())。
此画布的关键元素之一必须是使用以下css设置的背景梯度：
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 36%,#207cca 71%,#7db9e8 100%);。
如您所见，这是使用一个特定的角度(-45deg) )设置的。
有什么方法让我用画布来创建这个，也可以从这个背景中创建一个图像吗？
这在手动设置css -后台属性时不起作用，因为toDataURL没有考虑到任何css。我也看过把它自己画到画布上，但是c
浏览 0提问于2015-04-06得票数 5
回答已采纳
1回答
我做了一个画布，并添加了不同的对象，如图像，剪贴画和文本。当我使用canvas.toDataURL()方法对画布进行快照时，当它只包含文本时，它会给出正确的快照。但是当我向画布中添加一个图像时，它将返回一个空白页。
我的代码如下：
canInstance.discardActiveObject();
drawCanvas.loadFromJSON(json,function(){
var img = drawCanvas.toDataURL("png");
$("#previewPopUp").append("<img src=&
浏览 1提问于2014-02-07得票数 0
回答已采纳
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDa
浏览 8提问于2022-07-19得票数 0
回答已采纳
1回答
我对画布上的绘画有一个问题。我可以看到图像正在绘制，但看起来它是异步绘制的。当涉及到画布和绘画时，我是一个新手，所以我一直在遵循一些教程。 现在，我正在使用for循环在特定位置绘制图像以创建纹理页面，因此使用for循环来获取百分比x和y位置，然后导出/下载。图像都显示出来了，但完成后，dataurl显示为空白。我主要只是console.log的信息，看看图像是否被正确转换。 下面是我的代码的外观 function createImage(ctx,img,x,y){
var image = new Image();
image.src = img;
image.o
浏览 3提问于2020-10-31得票数 0
回答已采纳
如何打印使用javascript绘制内容的已创建的画布元素？我的打印预览显示一个空白框而不是画布元素中的内容？
首先我使用html2canvas创建我的画布图像，然后我看到这个图像被创建了。但我无法打印包含相关图片的div。
在IE中，当触发按钮两次时，我可以看到它。在第一次单击它打开空白打印预览，在第二次单击它打开与相关内容。但是，在chrome中，它一次打开空白内容，就不能加载第二个触发器；页面会冻结。
这是我的密码；
function printDiv(index) {
var canvasImg = "";
var divToPrint = document.getEl
浏览 3提问于2014-07-11得票数 2
1回答
我试图使用canvas将数据URL (从用户提供的文件中获取)图像绘制到画布上，然后使用JsZip将生成的图像打包到要下载的压缩文件中。
注意:画布从未实际显示给用户。它只用作帧缓冲区。
问题是，当使用“drawImage”函数时(来自不同的解决方案)，图像没有被绘制到画布上：
const url = URL.createObjectURL(acceptedFiles[image])
const img = new Image()
img.onload = () => ctx.drawImage(img, column, row, imageWidth, imageHeight)
img
浏览 7提问于2022-09-06得票数 0
摘要:假设我在浏览器中绘制了一个带有画布元素的白色笑脸。当我通过Safari中的js/ajax (使用toDataUrl(' image /png') )从这个画布生成要发布到PHP服务器的图像字符串时，使用PHP函数imagecreatefromstring()和imagepng()在服务器上创建的图像是正确的高度和宽度，但它是白色的，而不是浏览器中画布上的笑脸。
我从base64_decoding之前的字符串中去掉了"data: image /png;base64“并保存到图像文件中。
这种方法在FF和Chrome中可以完美地工作。
toDataUrl在js中生成的
浏览 5提问于2012-04-24得票数 3
回答已采纳
我正在尝试将html5画布的内容保存到我的Rails应用程序中。我找到了
var url = canvas.toDataURL('image/png');
但是我想不出怎么把它放到我的帖子/表格里。
我正在使用carrierwave来处理图像，但我希望用户在画布上绘制一个图像，而不是上传图像。
我正在考虑将表单的输入文件设置为此内容，但这似乎不是它的工作方式
或者也许我不应该使用载波？
谢谢
浏览 0提问于2012-02-03得票数 3
回答已采纳
我正在使用fabric.js在画布上绘制元素，我已经使用canvas.setZoom()和canvas.getZoom()来调整画布的大小，我还通过canvas.relativePan()使用了平移。
我想将画布的元素导出为图像，但是export函数只导出屏幕上的元素。不会导出从画布中平移或放大到在当前视图中不再可见的点的图元。
我尝试遍历元素以获得最小(顶部和左侧)点和最大(宽度，高度)点，并使用这些参数导出toDataURL，但我仍然无法获得隐藏的元素。
是否可以在不修改缩放和平移参数的情况下导出图像？
浏览 2提问于2017-02-08得票数 0
1回答
我一直试图让画布在页面刷新之间使用html5本地存储保存，但是当我刷新页面时，画布总是恢复为空白。
HTML
<canvas onload="loadCanvas()" onClick="canvas(event)" id="myCanvas" width="400" height="400">
Your browser does not support the canvas element
</canvas>
浏览 2提问于2013-12-15得票数 1
回答已采纳
2回答
首先，我知道，当画布的源图像来自另一个来源时，访问它的toDataURL方法是一个安全问题。
但在我的例子中，我使用data: url作为img的源，然后使用img并在canvas上绘制它，然后调用canvas.toDataUrl。
这在Chrome和Firefox上运行得很好，但是IE中的安全错误却失败了！
知道吗？
...
var svgxml = getxmlsvg();
img.onload = function(){
canvas.drawImage(this, 0, 0);
canvas.toDataURL("image/png"); // <
浏览 4提问于2013-12-02得票数 32
这里我有一个作为画布背景图像的图像：
<canvas id="colors_sketch" width="320" height="568"
style="background:url('./image/ufo/UFO2.png')" ></canvas>
我可以在这个画布上绘制草图，但是当我使用下面的代码作为base64格式发布到服务器时，它只发布了我绘制的画布内容。但是，我想要的是将UFO2.png作为背景发布，以及我绘制的base64到服务器。
var pic = docum
浏览 9提问于2015-02-08得票数 0
回答已采纳
2回答
变化的帆布背景
、、、
我有HTML5画布绘图应用程序，我需要改变它的背景颜色，当用户点击一个按钮。
画布上的背景色在用户端工作，但是用户可以将图像保存到服务器上，我正在使用canvas.toDataURL(' image /png')导出画布数据。问题是，画布的背景色不包括在内，它只发送数据用户绘制。
我曾想过要在整个画布上做一个大的修改，但那会覆盖所有已经画好的图画。有什么想法吗？
浏览 8提问于2014-02-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
