解决阿里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,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
1月前
|
存储 人工智能 开发工具
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
只需要通过向AI助理提问的方式输入您的需求,即可瞬间获得核心流程代码及参数,缩短学习路径、提升开发效率。
1432 4
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
|
1月前
|
存储 人工智能 缓存
AI助理直击要害,从繁复中提炼精华——使用CDN加速访问OSS存储的图片
本案例介绍如何利用AI助理快速实现OSS存储的图片接入CDN,以加速图片访问。通过AI助理提炼关键操作步骤,避免在复杂文档中寻找解决方案。主要步骤包括开通CDN、添加加速域名、配置CNAME等。实测显示,接入CDN后图片加载时间显著缩短,验证了加速效果。此方法大幅提高了操作效率,降低了学习成本。
5442 16
|
1月前
|
算法 Java Linux
java制作海报四:java BufferedImage 转 InputStream 上传至OSS。png 图片合成到模板(另一个图片)上时,透明部分变成了黑色
这篇文章主要介绍了如何将Java中的BufferedImage对象转换为InputStream以上传至OSS,并解决了png图片合成时透明部分变黑的问题。
62 1
|
3月前
|
存储 JavaScript 前端开发
Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】
这篇文章介绍了在Vue中实现图片上传到阿里云OSS对象存储服务的完整流程,包括服务端签名直传的前提知识、后端设置、前端组件封装以及图片上传和回显的效果展示。
|
4月前
|
运维 Serverless 对象存储
函数计算产品使用问题之如何配合OSS实现接口收到的图片或文件直接存入OSS
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
4月前
|
缓存 Java 对象存储
配置自己的 阿里OSS 环境,但在引入自己创建的依赖时出现报错。
配置自己的 阿里OSS 环境,但在引入自己创建的依赖时出现报错。
|
5月前
|
文字识别 算法 安全
视觉智能开放平台产品使用合集之如何将返回的图片链接转存到OSS(对象存储服务)
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
5月前
|
运维 网络协议 Serverless
函数计算产品使用问题之怎么将生成的图片保存到oss上
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之在调用接口传入的图片URL参数,文件在本地或者非上海地域OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
6月前
|
弹性计算 监控 Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中调用zip-oss-fc函数返回时候出现错误代码如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
Serverless 应用引擎操作报错合集之阿里函数计算中调用zip-oss-fc函数返回时候出现错误代码如何解决

热门文章

最新文章

下一篇
无影云桌面