logoImgUpload:function(file) {
let self = this;
self.formatUpload(file);
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
self.isAlphaBackground = false;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); // base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// canvas尺寸设置
canvas.width = originWidth;
canvas.height = originHeight;
// 清除画布
context.clearRect(0, 0, originWidth, originHeight);
// 图片绘制在画布上
context.drawImage(img, 0, 0);
// 获取图片像素信息
var imageData = context.getImageData(0, 0, originWidth, originHeight).data;
// 检测有没有透明数据
self.isAlphaBackground = false;
for (var index = 3; index < imageData.length; index += 4) {
if (imageData[index] != 255) {
self.isAlphaBackground = true;
break;
}
}
// isAlphaBackground就是最后石头有透明或半透明背景色的结果
console.log(self.isAlphaBackground)
};
self.design.logo = e.target.result;
}
return false;
},

canvas将图片转成base64格式 以及 验证图片是否透明的更多相关文章

  1. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  2. 图片转成base64位 页面中图片展示

    <img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...

  3. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  4. C++读写图片数据转成Base64格式的一种方法

    最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...

  5. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  6. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  7. delphi将图片转换成Base64编码函数

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  8. ABBYY如何把图片转换成pdf格式

    在制作工作文件的时候,有时候会遇到需要进行文件格式转换的情况,比较常见的文件格式转换就包含了Office与pdf格式之间的转换.但除此之外,图片与pdf格式也是可以进行转换的,那么图片要怎么操作,才能 ...

  9. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. Java知多少(65)线程的挂起、恢复和终止

    有时,线程的挂起是很有用的.例如,一个独立的线程可以用来显示当日的时间.如果用户不希望用时钟,线程被挂起.在任何情形下,挂起线程是很简单的,一旦挂起,重新启动线程也是一件简单的事. 挂起,终止和恢复线 ...

  2. MYSQL + MHA +keepalive + VIP安装配置(二)--MHA的配置

    一.总概 1.MHA介绍 MHA(Master High Availability)是自动的master故障转移和Slave提升的软件包.它是基于标准的MySQL复制(异步/半同步).      MH ...

  3. mycat 9066管理端口

    1.连接mycat 9066管理端口 命令:mysql -uroot -proot -P9066 -h127.0.0.1 -u:用户名 -p:密码 -P:端口 -h:ip地址例:linux路径切换到m ...

  4. Java SpringBoot中使用sqljdbc4注意事项 java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver

    因项目需要,需要在Java项目中访问 MSSQLServer 数据库,本地开发的时候,没有问题,可以正常链接数据库,通过Jenkins部署到服务器上时候,报数据库驱动未找到. java.lang.Cl ...

  5. [Object Tracking] Contour Detection through Tensorflow running on smartphone

    From: 手机端运行卷积神经网络的一次实践 -- 基于 TensorFlow 和 OpenCV 实现文档检测功能 貌似不错的东西:移动端视觉识别模型:MobileNets Holistically- ...

  6. C#获取路径总结

    一.获取当前文件的路径 1.  System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName  获取模块的完整路径,包括文件名. ...

  7. Texture::setUnRefImageDataAfterApply

    当该值设置为true时,OSG在应用过该纹理对象后(apply),自动释放其对Image对象的引用,以减少内存占用

  8. Qt编写的开源帖子集合(懒人专用)

    回顾自己学习Qt以来九年了,在这九年多时间里面,从本论坛学习不到不少的东西,今天特意整了一下自己开源过的资源的帖子,整理一起方便大家直接跳转下载,不统计不知道,一统计吓一跳,不知不觉开源了这么多代码, ...

  9. sencha touch 入门学习资料大全(2015-12-30)

    现在sencha touch已经更新到2.4.2版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...

  10. vscode 设置 cmder为终端

    "terminal.integrated.shell.windows": "cmd.exe", "terminal.integrated.shellA ...