解决阿里oss远程图片html2canvas生成海报时跨域问题(附代码)

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 解决阿里oss远程图片html2canvas生成海报时跨域问题(附代码)

html2canvas生成海报的代码网上有很多,文章里不做详述,此文章主要解决阿里oss远程图片html2canvas生成海报时跨域问题

一、问题:

如果生成海报的图片存在远程图片,那么js报错如下:

Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

二、解决方式有两种

     ①,将图片下载以后上传到自己服务器,再从服务器读取后生成海报,此方法不是很实用,不推荐

     ②,将图片转换为base64格式后生成海报,下面详细介绍一下这种方法

三、步骤(以阿里云oss图片为例)

     ①,海报生成js代码中添加allowTaint: true

var Opts = {
  allowTaint:false,
  useCORS:true,//允许加载跨域的图片
  tainttest:true, //检测每张图片都已经加载完成
  scale:scaleBy, // 添加的scale 参数
  canvas:canvas, //自定义 canvas
  logging: false, //日志开关,发布的时候记得改成false
  width:width, //dom 原始宽度
  height:height //dom 原始高度
};

allowTaint: true 和 useCORS: true 都是解决跨域问题的方式,不同的是使用allowTaint 会对canvas造成污染,导致无法使用canvas.toDataURL 方法,所以这里不能使用allowTaint: true

     ②,在阿里云oss对应的Bucket中设置允许跨域

点击进入对应的Bucket中-基础设置-跨域设置

a4dae1a8d40fbb4b8ae6e261d3a1152.png

③,将图片转换为base64格式

网上有很多代码,这里附上我自己用的PHP代码

function master_imgUrl_base64($url){
  if($url){
    $header = array('User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0','Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3','Accept-Encoding: gzip, deflate',);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($curl, CURLOPT_ENCODING, 'gzip');
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    $data = curl_exec($curl);
    $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);
  if ($code == 200) {//把URL格式的图片转成base64_encode格式的!
    $imgBase64Code = "data:image/jpeg;base64," . base64_encode($data);
    return $imgBase64Code;
  }else{
    return false;
  }
  }else{
    return false;
  }
}

调用的时候先判断是否是远程图片,如果是就转换一下:

  $preg = "/^http(s)?:\\/\\/.+/";
  if(preg_match($preg,$details_pt['pic'])){
     $detailspic =$details_pt['pic'];
  }else{
    $detailspic = master_imgUrl_base64($_W['attachurl'].$details_pt['pic']);
  }
  if(preg_match($preg,$details_pt['qr'])){
    $detailsqr =$details_pt['qr'];
  }else{
    $detailsqr =master_imgUrl_base64($_W['attachurl'].$details_pt['qr']);
  }

至此完毕,欢迎留言、

推荐两篇辅助文章:

阿里云OSS设置跨域访问 - Oops!# - 博客园   (图中的规则还是按本文中的配置)

阿里云oss访问图片出现跨域问题   (处理浏览器缓存)

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
84 0
|
22天前
HTML图片
【10月更文挑战第4天】HTML图片。
19 2
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
34 5
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`<img>`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`<a>`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
45 13
|
3月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
35 0
在线将多张图片拼接起来图工具HTML源码
|
3月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
29 2
|
4月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
172 1
|
4月前
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
65 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
|
4月前
|
缓存 Java 对象存储
配置自己的 阿里OSS 环境,但在引入自己创建的依赖时出现报错。
配置自己的 阿里OSS 环境,但在引入自己创建的依赖时出现报错。
|
5月前
|
移动开发 前端开发 JavaScript
将HTML5 Canvas的内容保存为图片
将HTML5 Canvas的内容保存为图片
35 5