乐趣区

关于canvas:canvas合成图片跨域相关问题

jiezi

原文地址：https://segmentfault.com/a/1190000038457321
作者：Fw 恶龙
本文首发于：思否

一、前言

前端在应用 canvas 合成图片时，如果波及到跨域的资源会导致绘制失败，首先须要该资源所在的 服务器配置容许跨域拜访，其次在前端开发过程中还须要留神图片的应用形式，以下记录目前合成图片用到的几种形式在开发中须要留神的中央。

二、相干技术流程

* 注：增加工夫戳的起因是动态资源可能波及到 CDN，可能资源服务器容许跨域拜访，然而该资源所走的 CDN 不反对跨域拜访，增加工夫戳以保障加载源站资源。

三、代码

* 注：以下代码只提供相干细节，无奈间接复制应用，需依据应用的框架自行编写相干代码

1. img 标签外链应用形式

<img id="bg" src=""crossorigin="anonymous">
document.getElementById('bg').src = yourImgSrc + '?time=' + new Date().valueOf()

2. js 动态创建 Image 对象

var bg = new Image()
bg.crossOrigin = 'anonymous'
bg.onload = function() {// onload to do something}
bg.src = yourImgSrc + '?time=' + new Date().valueOf()

四、相干文档

  • html2canvas 官网 API 文档
  • html2canvas 解决跨域图片的解决方案
退出移动版