JavaScript Canvas实现图片拼接与上传（全面且详细，解决图片跨域问题，已踩坑）

最新推荐文章于 2024-10-03 19:13:18 发布

crxk

最新推荐文章于 2024-10-03 19:13:18 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： js canvas html5

本文链接：https://blog.csdn.net/crxk_/article/details/113540043

版权

基本原理

计算好位置，把要拼接的图片绘制到画布上，然后再保存，没错就是这么简单。

第一步加载图片

此处以加载网络图片为例，为了避免回调地狱（callback hell），而且都到2021年了，还不会用Promise就有点说不过去了，首先封装一个函数，用于加载图片。可能有初学者对于此方式不太理解，建议先学习一下Promise。

function getImg(url) {
   
  return new Promise((resolve, reject) => {
   
    let img = new Image();
    img.src = url;
    // 图片跨域访问
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = () => {
   
      resolve(img);
    };
    img.onerror = () => {
   
      reject