JS图片拼接方法

字号+ 编辑: 国内TP粉 修订: 种花家 来源: 走看看 2023-09-12 我要说两句(0)

我大JavaScript又要大显神威啦

话不多说上代码

function splice(){
    var canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 800;
    var context = canvas.getContext("2d");

    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage = new Image();
    myImage.src = "./2.png";    // 第一张图片, 你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous'; // 跨域问题解决

    myImage.onload = function(){
        context.drawImage(myImage , 0, 0, 800 , 800); // 横纵坐标和宽高大小, 因为是背景图, 这里设定为铺满

        context.font = "60px Sumsun";
        context.fillText("我是文字", 350, 450);

        var myImage2 = new Image();
        myImage2.src = "./1.png";   // 第二张图片, 会覆盖到第一张图的上面, 你自己本地的图片或者在线图片
        myImage2.crossOrigin = 'Anonymous'; // 跨域问题解决
        
        myImage2.onload = function(){
            context.drawImage(myImage2, 175, 175, 225, 225); // 横纵坐标和宽高大小
            let base64 = canvas.toDataURL("image/png");  // "image/png" 这里注意一下
            let img = document.getElementById('avatar'); // 图片放置到的dom位置

            // document.getElementById('avatar').src = base64;
            img.setAttribute('src' , base64);
        }
    }
}

splice();

请在服务器上测试, 避免因跨域问题无法上线。

阅完此文,您的感想如何?
  • 有用

    1

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • JS如何防止父节点的事件运行

  • nodejs编写一个简单的http请求客户端代码demo

  • 使用Sublime Text3 开发React-Native的配置

  • 说一则为什么后端开发人员不选择node.js的原因

我要说说
网上宾友点评