个人中心
gpt4 book ai didi

javascript - canvas.toDataURL() 无法正常工作

转载 作者：太空狗 更新时间：2023-10-29 13:53:29 25 4
gpt4 key购买 nike

<分区>

我有一个 Canvas ，我在其中使用以下代码上传图像:

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);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

现在我想使用 canvas.toDataURL() 将图像加载到另一个 Canvas 。代码是:

var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);

    function drawDataURIOnCanvas(dataURL, name_of_canvas) {

    var myCanvas = document.getElementById(name_of_canvas);
    var img3 = new Image;
    var ctx2 = myCanvas .getContext('2d');
    img3.onload = function(){
       ctx2.drawImage(img3,0,0); // Or at whatever offset you like
    };
    img3.src = dataURL;
}

如果我给它一个有效的 url 就没问题。但是我尝试过的任何图片生成的 url 都是

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.

如果您尝试使用它，它不会生成 Canvas 中的飞机照片。如何使用函数 toDataURL 在另一个 Canvas 上绘制图像？

25 4 0
文章推荐： html - 如何在 周围设置边界？
文章推荐： android - 如何获取gridview(或RecyclerGridview)的选定项目的所有最近位置
文章推荐： android - 错误 - 请让您的 Activity 为共享模式扩展 XWalkActivity
文章推荐： 带有附加信息的 Git 日志装饰图
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com