canvas将图片转成base64格式 以及 验证图片是否透明
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格式 以及 验证图片是否透明的更多相关文章
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- 图片转成base64位 页面中图片展示
<img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...
- java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
- C++读写图片数据转成Base64格式的一种方法
最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...
- 图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
- js绝对地址图片转换成base64的方法
//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...
- delphi将图片转换成Base64编码函数
{************************************************************************** 名称: BaseImage 参数: fn: TF ...
- ABBYY如何把图片转换成pdf格式
在制作工作文件的时候,有时候会遇到需要进行文件格式转换的情况,比较常见的文件格式转换就包含了Office与pdf格式之间的转换.但除此之外,图片与pdf格式也是可以进行转换的,那么图片要怎么操作,才能 ...
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- Java知多少(27)继承的概念与实现
继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法和属性的过程.如果类B继承于类A,那么B就拥有A的方法和属性. ...
- Cisco HSRP热备份路由器协议配置
HSRP热备份路由器协议: HSRP是 Hot Standby Routing Protocol(热备份路由协议)的缩写,它的作用是当核心路由器不能正常工作时, 备用路由器能够实现自动平滑的替换,以保 ...
- pca , nmds , pcoa 图添加分组的椭圆
对于pca , nmds, pcoa 这些排序分析来说,我们可以从图中看出样本的排列规则,比如分成了几组. 为例样本分组更加的直观,我们可以根据实验设计时的样本分组情况,对属于同一个group的样本添 ...
- Angular4学习笔记(二)-在WebStorm中启动项目
点击配置 创建 选择命令 package.json 运行 查看运行结果
- [Tensorflow] Cookbook - CNN
Convolutional Neural Networks (CNNs) are responsible for the major breakthroughs in image recognitio ...
- 技巧:Vim 的纵向编辑模式
https://www.ibm.com/developerworks/cn/linux/l-cn-vimcolumn/ 开始之前 人类大脑对文字的处理是平面式的,所以我们浏览文章.查找资料或者重构代码 ...
- css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...
- babel 7 简单升级指南
babel 7 babel 7 发布两天了,试着对当前项目更新了下,仅此记录分享 主要改动参考 官方博客 官方升级指南 主要升级内容 不再支持放弃维护的 node 版本 0.10.0.12.4.5 使 ...
- 微信小游戏 main.js没有被压缩
发布时,发现main.js没有被压缩. 在config.wxgame.ts里增加如下图.
- Oracle数据库入门——目录结构
一.Oracle_Home目录 Oracle_Home主目录位于D:\dev\oracle\product\10.2.0(oracle安装路径)下,它包含Oracle软件运行有关的子目录和网络文件以及 ...