var canvas=document.getElementById("canvas"),//获取canvas
ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
img = new Image(),//创建新的图片对象
base64 = '' ;//base64
img.src = 'http://www.xxxx.png';
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function(){//图片加载完,再draw 和 toDataURL
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
};

解决 canvas 将图片转为base64报错的更多相关文章

  1. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  2. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  3. Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

    1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...

  4. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  5. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  6. Base64 报错 的解决办法 (Base-64 字符数组或字符串的长度无效。, 输入的不是有效的 Base-64 字符串,因为它包含非 Base-64 字符、两个以上的填充字符,或者填充字符间包含非法字符。)

    Base64 报错 的解决办法, 报错如下:1. FormatException: The input is not a valid Base-64 string as it contains a n ...

  7. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

  8. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  9. 解决Sublime包管理package control 报错 There are no packages available for installation

    解决Sublime包管理package control 报错 There are no packages available for installation 真的是哔了狗了,要不是我机智的重新安装了 ...

随机推荐

  1. thinkphp或者kohana 导入和读取文件

    1.无论是那个框架的导入,其实都是一样的原理的,但是首先我们要导入包,可能就这点不同. kohana的导入包的方法:require_once(Kohana::find_file('vendor','P ...

  2. ​ 用一个开发案例详解Oracle临时表

    ​ 用一个开发案例详解Oracle临时表 2016-11-14 bisal ITPUB  一.开发需求  最近有一个开发需求,大致需要先使用主表,或主表和几张子表关联查询出ID(主键)及一些主表字段 ...

  3. ​ oracle分区表(附带按照月自动分区、按天自动分区)

    --list_range  示例   drop table list_range_tab purge; create table list_range_tab(n1 number,n2 date)pa ...

  4. dubbo初认知(dubbo和springCloud关系,在微服务架构中的作用等)(持续更新中)

    一:dubbo是什么? dobbuo是阿里开源的一个高性能优秀的服务框架, 可通过高性能的 RPC 实现服务的输出和输入功能,使得应用可以和 高性能的rpc实现输入和输出的功能,可以了  Spring ...

  5. MSSQL数据库后台进程(线程)

    与Oracle数据库类似,微软数据库产品MSSQL也有诸多后台进程来保证数据库系统的高效正常运转,由于MSSQL采用的是线程模型,应该叫做后台线程,为了大家易于理解,我们在暂且称之为后台进程,下面我们 ...

  6. android 数据库添加字符串 添加失败 解决方案

    这两天遇到一个棘手的问题,在往sqlite数据库中添加数据时,总是添加失败,但是添加数字却可以.原来是添加时,忘记添加''号修饰. 修改前: 修改后: 这样就完美解决.

  7. java 数据溢出和编译错误的差别

    int a=100000000000;编译错误,超出int范围 int a=2100000000; int b=a*12020200;数据溢出,a并未溢出,但b在通过a计算后的数据溢出 long e= ...

  8. Kafka.net使用编程入门(三)

    这个世界既不是有钱人的世界,也不是有权人的世界,它是有心人的世界. 一些有用的命令 1.列出主题:kafka-topics.bat --list --zookeeper localhost:2181 ...

  9. bzoj1666

    题解: 简单模拟 按照题目意思来就可以了 代码: #include<bits/stdc++.h> using namespace std; int n,ans; int main() { ...

  10. Mac下安装ipython与jupyter

    IPython从Python发展而来,更倾向于科学计算.互联网数据分析更喜欢用. 首先切换root用户: sudo su - pip3自动安装ipython yuchaodeMacBook-Pro:~ ...