/**
* 将图片转换为base64
* 解决html2canvas跨域合成失败的问题
*/
var getBase64Image = function(src, cb) {
var img = document.createElement('img'),
dataURL = '';
img.crossOrigin = '';
img.src = src;
img.onload = () => {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
dataURL = canvas.toDataURL();
cb(dataURL);
};
}
getBase64Image('http://imgsrc.png', function(url) {
$('.img').attr('src', url);
});

解决html2canvas图片跨域合成失败的问题的更多相关文章

  1. java 访问 太平洋网ip接口,解决前端js 跨域访问失败问题

    前端 js访问太平洋网IP接口地址,返回结果是403 服务器拒绝处理异常, 于是,想到了使用 服务器端访问,然后再将查询结果返回的前端 这是Java的测试源码,[具体的contronller端源码懒得 ...

  2. html2canvas - 解决办法之图片跨域导致的截图空白

    1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 var opts = { scale ...

  3. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  4. 解决dotnet-Angular的跨域(cors)问题

    解决dotnet-Angular的跨域(cors)问题 前言 之前学了点 Angular ,打算用 dotnet core 做后端,之前没接触过这方面的东西,理所当然的遇到了跨域问题,之后也解决了,所 ...

  5. C#彻底解决Web Browser 跨域读取Iframes内容

    C#彻底解决Web Browser 跨域读取Iframes内容 用C# winform的控件web browser 读取网页内容,分析一下数据,做一些采集工作. 如果是同一个域名下面还是好办的,基本上 ...

  6. 转:解决tomcat服务器跨域问题

    原文地址: 解决tomcat服务器跨域请求问题 注:还未测试 在tomcat 的web.xml 配置文件中加入如下配置过滤器 (如web.xml中有多个filter时要把下面配置放在最前端) < ...

  7. 使用Spring Session和Redis解决分布式Session跨域共享问题

    http://blog.csdn.net/xlgen157387/article/details/57406162 使用Spring Session和Redis解决分布式Session跨域共享问题

  8. Vue解决接口访问跨域问题

    随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...

  9. 170222、使用Spring Session和Redis解决分布式Session跨域共享问题

    使用Spring Session和Redis解决分布式Session跨域共享问题 原创 2017-02-27 徐刘根 Java后端技术 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...

随机推荐

  1. app被Rejected 的各种原因翻译。这个绝对有用

    1. Terms and conditions(法律与条款) 1.1  As a developer of applications for the App Store you are bound b ...

  2. 三级分销会员一次查询出来的SQL语句

    SELECT p.id AS partyId, p.parent_id AS parentId, pul.username AS userName, p.city, p.birth_date AS b ...

  3. 关于取List中的指定几条数据以及注意事项

    list1 = list2.subList(start, end); start,end分别是第几个到第几个. 注意的是此方法和substring一样,包含前不包含结尾,取下标索引 另一个注意的地方是 ...

  4. Javascript 用来验证电话号码的正则

    Javascript 用来验证电话号码的正则 在学习 Javascript 时学习到的. function telephoneCheck(str) { // return /^(1\s?)?(\d{3 ...

  5. HZOJ Drink

    神仙题,打了个whs式暴力卡常卡A了(我没脸),正解还是要打的,然而作者的题解看不懂…… Drink: 看惯了罗马音的小朋友们都会知道r发l的音,题目名:D Link. 每次修改都会改变O( N ^  ...

  6. jQuery 练习 dom

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Jmeter json处理器

  8. js this详解

    This的定义: 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用. this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是 ...

  9. hdu 4476 Cut the rope (2-pointer && simulation)

    Problem - 4476 题意是,给出若干绳子,对同一根绳子只能切割一次,求出最多能获得多少长度相同的绳子. 代码中,s是最大切割长度,而当前切割长度为t/2. 代码如下: #include &l ...

  10. 【原生JS】进阶最后一个编程篇(与之前的选项卡不同的做法)

    完成效果图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...