解决Canvas画布跨域图片方法

Canvas 是前端开发中一个非常强大的工具，通过生成标签海报绘制等，但也会遇到很多问题，例如海报报错，海报绘制大小，生成海报等一系列问题，下面介绍如何将图片绘制海报失败，产生跨域的问题。它有一个限制：跨域图片。当你试图在 Canvas 中操作来自其他域的图片时，通常会遇到跨域问题。

一、跨域问题的原因：

        浏览器出于安全考虑，实施了同源策略（Same-Origin Policy），这意味着如果你的页面来自一个域（例如 https://yourwebsite.com），它不能直接访问不同域（例如 https://anotherwebsite.com）的资源，包括图片。这会导致 Canvas 在尝试绘制跨域图片时失败。

二、解决的方法：

服务器代理

一种解决方法是通过在你的服务器上设置代理，将跨域图片请求发送到你的服务器，然后由服务器代为请求该图片并返回给你的页面。这样，你就绕过了浏览器的同源策略。

const express = require('express');
const axios = require('axios');
 
const app = express();
const port = 3000;
 
app.get('/proxy-image', async (req, res) => {
  try {
    const imageUrl = req.query.url;
    const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
    const data = Buffer.from(response.data, 'binary').toString('base64');
    res.send(`data:image/png;base64,${data}`);
  } catch (error) {
    res.status(500).send('Error fetching image');
  }
});
 
app.listen(port, () => {
  console.log(`Proxy server is running on port ${port}`);
});
 

CORS 头信息

过设置服务器上的 CORS（跨域资源共享）头信息来实现。服务器应该在响应中包含以下头信息：

Access-Control-Allow-Origin: *

将图片转成 Base64 数据

const img = new Image();
image2Base64(' // https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg').then(base64 => {
            console.log("base64-------------")
            console.log(base64)
            img.src =base64
            img.crossOrigin = '*'
            img.onload = () => resolve(img)
            img.onerror = () =>{
                img.src = '/img/admin/error1.jpg';
            }
})
        
function image2Base64(img) {//导入的图片路径https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg
        var toBase64= new Promise(function(resolve, reject){
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", img, true);
            // 至关重要
            xhr.responseType = "blob";//文件流
            xhr.onload = function (res) {
                if (res.currentTarget.status == 200) {
                    //得到一个blob对象
                    var blob = res.currentTarget.response;
                    // 至关重要
                    let oFileReader = new FileReader();
                    oFileReader.onloadend = function (e) {
                        let base64 = e.target.result;//base64
                        resolve(base64)
                    };
                    oFileReader.readAsDataURL(blob);
                }
            }
            xhr.send();
        });
        console.log("toBase64")
        console.log(toBase64)
        return toBase64;
}

这将创建一个 Base64 编码的图片对象，你可以将其绘制到 Canvas 上，但过大的图片不建议转换，会影响效率。