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= ...
随机推荐
- git命令之git clone用法
在使用git来进行版本控制时,为了得一个项目的拷贝(copy),我们需要知道这个项目仓库的地址(Git URL). Git能在许多协议下使用,所以Git URL可能以ssh://, http(s):/ ...
- 系统垃圾清理利器CCleaner v5.30.6063绿色单文件版(增强版)
系统垃圾清理利器CCleaner现已更新至v5.30.6063,此次更新为Edge.IE浏览器提供了更好的清理功能,更新了Windows Explorer MRU清理功能,同时改善了应用程序中的SSD ...
- nginx下wordpress 固定链接问题
情况是这样的, 我的wordpress并不是放在网站的根目录的,而是放在/blog目录下的,然后在wordpress中设置固定链接的时候,每次都出错,用了网上几个方法都不行,后来在http://cod ...
- Halcon 2D测量
* This program shows how to detect the edges of a diamond * with subpixel accuracy and calculate the ...
- 解决pymongo里操作IOSDate类型的问题
pymongo是Python对MongoDB的操作库.但是由于python没有IOSDate类型,所以对Mongo的时间类型是个很麻烦的操作.整理一个把python能识别的date类型转化为IOSDa ...
- 关于指针*前后const代表的意思——记住一个口诀“左内右本”
记住一个口诀“左内右本”:const出现在*的左边,则说明指针所指向的内容是常量const出现在*的右边,则说明指针本身是常量如果*左右两边都出现const,那么说明指针本事是常量,它所指向的内容也是 ...
- Java如何替换所有指定(出现)的字符串?
在Java编程中,如何替换所有指定(出现)的字符串? 以下示例演示如何使用Matcher类的replaceAll()方法替换字符串中的所有出现的子字符串. package com.yiibai; im ...
- [原创]MSP430FR4133练习(一):GPIO输入电平状态判断
硬件环境:MSP430FR4133 LANCHPAD开发板 软件环境:IARV7.10 For 430 源代码: #include "driverlib.h" void main( ...
- 《objective-c基础教程》学习笔记(三)—— 从结构体到面向对象
一听标题,感觉十分的抽象.面向对象就是(Object-Oriented Programming)的首字母缩写:OOP,是当今最主流的编程方法. 那么,面向对象编程具体有什么好处呢.是如何来实现呢?通过 ...
- Linux内核 GPIO操作部分API
内核中关于GPIO的操作API主要集中在<linux/of_gpio.h>和<linux/gpio.h>中,前者主要是GPIO直接与设备树相关的操作,在Linux 设备树操作A ...