在画布上绘制多个图像。但是toDataURL返回空白
在画布上绘制多个图像，但是toDataURL返回空白的问题可能是由于以下几个原因导致的：
- 绘制图像时的异步操作：在绘制图像时，可能存在异步操作，导致toDataURL方法在绘制完成之前被调用，从而返回空白。解决这个问题的方法是使用回调函数或者Promise来确保绘制完成后再调用toDataURL方法。
- 图像加载延迟：如果绘制的图像是从远程服务器加载的，可能存在网络延迟导致图像加载未完成就调用toDataURL方法，从而返回空白。可以使用图像的onload事件来监听图像加载完成后再调用toDataURL方法。
- 绘制图像的尺寸问题：如果绘制的图像尺寸过大，可能会导致toDataURL方法返回空白。这是因为toDataURL方法有一个最大尺寸限制，超过限制的图像无法转换为DataURL。可以尝试缩小图像尺寸或者分块绘制图像来解决这个问题。
- 安全策略限制：某些浏览器可能存在安全策略限制，禁止跨域绘制图像并获取其DataURL。这种情况下，可以尝试将图像上传到同一域名下，或者使用服务器端代理来获取图像的DataURL。
总结起来，解决toDataURL返回空白的问题可以从以下几个方面入手：确保绘制操作完成后再调用toDataURL方法、处理图像加载延迟、注意图像尺寸限制以及处理安全策略限制。
相关·内容
1回答
有关使用kinetic js保存图像的问题
html、kineticjs
在将图像加载到舞台上之后，如果我尝试使用以下代码保存图像
stage.toDataURL({
callback: function(dataUrl) {
window.open(dataUrl);
},
mimeType: 'image/jpeg',
quality: 0.5
});
我在kinetic.js中收到一个安全脚本错误(我使用的是kinetic-v4.0.0.js)
SecurityE
浏览 1提问于2013-02-01得票数 0
1回答
只有在ajax完成后才下载文件
ajax、jsf、primefaces、jasper-reports
的情况：--我需要用html2canvas捕捉屏幕的屏幕截图，获取生成的dataURL，将其发送到后台bean，生成带有图片的JasperReport，然后打开下载对话框，以便用户可以下载包含屏幕图片的PDF。
我尝试的解决方案(它不能100%工作)：
这是执行所有操作的命令链接：
<p:commandLink ajax="true" value="Print PDF" onclick="printPDF();" oncomplete="clickPrintButton();" />
javascript文件中的pri
浏览 4提问于2015-10-14得票数 0
回答已采纳
1回答
在画布上绘制多个图像。但是toDataURL返回空白
javascript、canvas
好的，我正试图在画布上绘制多个图像斑点，一旦所有的工作都完成了，从canvas.basically得到一个单独的图像，我正在尝试制作一个小模板。
for ( i = 0; i < array.length; i++) {
img = new Image();
img.onload=function(){
ctx.drawImage(img, column*width, row*height, width, height);
column=column+1;
if(column==11)
{
row=row+1;
column
浏览 26提问于2018-02-05得票数 1
回答已采纳
1回答
推迟承诺的字典
jquery、promise、jquery-deferred
我需要建立PDF与图像。我认为可以提供指向本地存储文件的链接，但是(请纠正我，我很高兴)，原来PDFmake只能处理数据:URI编码的图像。
所以现在我必须转换图像，但是它们必须先加载，否则我就转换为空白--什么都没有。
的想法是将PDF建筑代码放在
$.when.apply(null, imgData).done(function() { });
AFAIK，图像可以随机加载，因此为了防止它们的顺序混乱，我将它们放入字典中，其中每个值的键是intital imgSources数组中的索引。
现在，这是我第一次使用Deferred类和$.when，所以请纠正我的错误用法。
function t
浏览 0提问于2016-12-08得票数 1
回答已采纳
2回答
如何检查，一个画布元素是否已被污染？
javascript、html5-canvas、cors
基本场景
我在客户端加载了几张图片。其中一些来自另一个领域，有些则不是。有些我可能可以使用访问，有些则不能。
基本要求是在可能的情况下检索图像的。
问题
在将图像绘制到画布元素(我需要获得一个dataURL，对吗？)之后，如何在没有try ... catch块的情况下检查画布是否已被污染？如果画布被污染了，我就不能再使用toDataURL() ()了。
var image = new Image(),
canvas = document.createElement( 'canvas' ),
context = canvas.getContext( '2d
浏览 1提问于2014-03-22得票数 19
2回答
如何避免在window.onload之前执行toDataURL
javascript、canvas
canvas.toDataURL()返回空白图像。因为它在window.onload之前执行 window.onload = function() {
var canvas = document.getElementById('myCanvas');
var video = document.getElementById('video');
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, video.videoWidth, video
浏览 26提问于2019-06-25得票数 0
回答已采纳
2回答
SecurityError:在画布中加载图像，修改图像并创建dataURL
javascript、html、canvas
我尝试使用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
回答已采纳
2回答
使用crossOrigin攻击加载图像。在Firefox addon sdk中
javascript、firefox、firefox-addon、cross-domain、firefox-addon-sdk
在Firefox addon SDK的内容脚本中，我以如下方式加载图像：
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = URL;
img.onload = function (data) {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext(&#
浏览 5提问于2015-02-07得票数 1
回答已采纳
1回答
DataURL未返回值
javascript、html、html5-canvas、local-storage、data-uri
我创建了一个函数，将图像的DataURI存储在本地存储中。
数据完美地存储在本地存储中，但如果我试图从函数获取值，即return语句，那么我得到的值是“未定义的”值。很可能，该函数甚至在转换为dataURL之前就返回了值。
需要你的帮助。
下面是我的代码：
function getImageDataURL(local_name,w,h,i){
var data, canvas, ctx;
var img = new Image();
img.onload = function(){
canvas = document.createElement('canva
浏览 2提问于2013-05-13得票数 1
回答已采纳
2回答
取变量内负荷函数
javascript、jquery
我知道这个问题可能被回答了很多次，但我不知道该如何去寻找答案。这就是问题所在。
我在使用javascript
function getDataUrl( file ){
var url = URL.createObjectURL( file ),
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d"),
img = new Image,
dataURL = '';
img.load = function(){
浏览 7提问于2014-02-19得票数 2
回答已采纳
3回答
提交表单时更新和保存画布
javascript、jquery、html、html5-canvas
我有以下代码，它在提交表单之前执行。
我正在更改图像，然后在保存该图像之前重新绘制画布。
我遇到的问题是它不能像预期的那样工作(相反，它用之前的图像src属性保存图像)……
如果我在firebug中一步一步地通过它，正确的图像就会被保存，这让我认为在保存之前需要延迟一段时间……
我该怎么做呢？
$('#WindowForm').submit(function () {
if (isInternal)
{
imgsrc = $(".externalColor.selected-color
浏览 1提问于2014-08-30得票数 0
3回答
Phonegap编码图像base64
javascript、image、cordova、base64
我正在尝试将图像编码为base64并将其发送到服务器。当我检索图像时，它显示的所有内容都是空白的。
我用来编码它的代码是这样的：
encodeImageUri = function(imageUri) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
c.width = this.w
浏览 1提问于2013-01-12得票数 5
2回答
SECURITY_ERR:调用画布的toDataURL方法时的DOM异常18
javascript、html、internet-explorer、safari、mobile-safari
当其他浏览器正常工作时，我试图从画布中检索SVG图像在Internet和Safari浏览器上绘制的数据URL时，会收到以下错误。
此外，SVG映像包含一些<image>元素，其xlink:href属性设置为从用户的文件系统读取的图像，作为数据URL。由于这些图像不是位于不同的域上，所以当试图获取绘制SVG图像的画布的dataURL时，我想不出为什么会抛出此错误。提前谢谢。
SECURITY_ERR: DOM异常18:试图突破用户代理的安全策略。“
浏览 5提问于2014-02-17得票数 8
1回答
如何在Android系统上使用phonegap访问SDCARD中的图片
java、android、html、cordova、phonegap-plugins
我已经创建了一个canvas(html5)元素，让用户在上面画画，在绘图之后，他们可以保存(一个按钮)它：canvas.toDataURL("image/png");将被执行，编码的base64 dataURL字符串将存储到一个文件中。但我需要让用户看他的画。
Here is the question: As the user save many story strings in a text file and the `filesystem` read the it, the memory will leak.
PhoneGap抱怨：java.lang.OutOfMemo
浏览 5提问于2013-03-21得票数 1
4回答
JavaScript Onload属性
javascript、onload
我读过一些关于onload属性的文章。我的理解是，它不是一个方法，也不是一个事件、事件侦听器或触发器。它只是一个空指针，指向一个等待赋值的函数。下面是一个简短的脚本。它根据事件分配一个图像处理函数，然后将图像渲染到网页。而不是将函数赋值给onload，onload是指向函数的指针。为什么我不能直接执行函数呢？我说的有意义吗？谢谢
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.tar
浏览 0提问于2020-04-18得票数 0
4回答
如何在Safari浏览器上使用canvas.toDataURL()修复黑屏？
javascript、canvas、video、safari、video.js
我的应用程序中有一个视频播放器(video.js)，还有一个函数，它可以拍摄视频的快照。
函数创建一个画布，它绘制快照并将画布转换为DataURL。
但这在Safari行不通。
我在Safari上有个黑屏幕。
视频标签看起来像：
<video crossorigin="anonymous" playsinline="playsinline" id="player_2140_html5_api" class="vjs-tech" data-setup="{ "inactivityTimeout&
浏览 29提问于2022-02-14得票数 0
2回答
带有预定义图像的HTML5画布
css、image、html、canvas
最近我开始在HTML5画布上工作，我还是个新手。我有一个问题，如下：
我正在加载一个画布与身体图表图像(预定义的图像)，并在该用户将绘制一些线条，形状等。
之后，我将生成一个图像对象，如下所示
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
但是，在这里它只生成那些由用户绘制的元素(线，形状)作为PNG图像。它不会获取预定义的画布背景图像。
我需要生成一个PNG图像，其
浏览 2提问于2012-05-08得票数 2
回答已采纳
2回答
Canvas.toDataURL(“图像/png”)-它是如何工作的以及如何优化它
javascript、canvas
我想知道有没有人知道
canvas.toDataURL("image/png");
有用吗？我想更好地理解，因为有时它似乎真的使我的电脑慢下来了。是否有一种方法来优化base64图像的前、内或后，以获得更好的性能？
function base64(url) {
var dataURL;
var img = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
sr
浏览 0提问于2014-05-01得票数 3
回答已采纳
1回答
Javascript到base64不加载
javascript、canvas、base64、photoshop-script
我开发了Photoshop扩展，它向服务器发送图像。
编辑: photoshop构建中的扩展来自定义GUI的html文件，基本与任何js文件相同的js文件，但它也可以启动photoshop功能，它是从photoshop.执行。
我需要从用户的文件系统发送图像(从C：\path\到\映像)
为了对图像进行编码，我将它们转换为dataURL (base64)。
问题是在我第一次将图像转换为dataURL时发生的。但在第二次，所以，它设法转换图像和一切都是好的。在第一次没有加载图像时。
我有一个文件夹中的图片，我想从那里上传图片，我使用了一个循环，运行在照片上并将它们设置为<img src=p
浏览 1提问于2016-08-29得票数 0
4回答
如何使用Fabric.js将画布保存为图像
javascript、canvas、cross-domain、fabricjs、todataurl
我有一个Fabric.js原型，人们可以将照片、文本和地图加载到画布中。当它们完成时，我希望它们能够将画布保存为图像。我试过使用标准：
canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);
但它说画布是tainted -我认为是因为图像(上面的方法工作，当它只是文本)。错误是：
Uncaught SecurityError: Faile
浏览 7提问于2014-04-15得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
