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. 关于linux中用vi新建立一个.c文件无法保存,显示E212错误的时候

    在ubuntu16.04环境下,用vi新键.c文件,怎么保存也不能 先按ESC  然后:  在后wq  可是显示文件212错误. 后来知道在建立.c的文件夹的权限不对.这里的权限用 ls -l来查看 ...

  2. 新增节点NewBook并增加属性Name="WPF"

    XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); var root = xmlDoc.DocumentElement;//取到 ...

  3. PAT 1023 Have Fun with Numbers

    1023 Have Fun with Numbers (20 分)   Notice that the number 123456789 is a 9-digit number consisting ...

  4. Python----list&元祖常用方法总结

    一.创建列表,把使用逗号分隔的数据用中括号[  ]括起来即为一个列表,列表也叫数组.list.array:列表里面也可以再套列表,一个列表里面套一个列表,叫二维数组:一个里面套一个列表,里面的列表再套 ...

  5. 一、Redis数据备份与恢复

    Redis里的数据都是保存在内存中,关闭服务器必须进行数据备份. 1.Redis的数据持久化 bgsave做镜像全量持久化,AOF做增量持久化. bgsave的原理:fork和cow(copy on  ...

  6. 【转】Code First 属性详解

    下面解释每个配置的作用 Table :用于指定生成表的表名.架构信息. Column :用于指定生成数据表的列信息,如列名.数据类型.顺序等. Key :用于指定任何名称的属性作为主键列并且默认将此列 ...

  7. Windows系统目录解释

    目录 说明 C:\Program Files 64位程序安装目录 C:\Program Files (x86) 32位程序安装目录 C:\Windows 操作系统主要目录 C:\Windows\Sys ...

  8. 创建含有多module的springboot工程(八)

    创建根工程 创建一个maven 工程,其pom文件为: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?xml version="1.0" enc ...

  9. python 豆瓣验证码识别总结

    总结:  pytesseract 识别比较标准的图片  识别成功率   还是不错的. 验证码的图片识别 需要先处理好   再用pytesseract 识别 from PIL import Image  ...

  10. C/C++ 全局变量的访问

    #include <iostream> using namespace std; ; int main(int argc, char **argv) { ; std::cout <& ...