zoukankan      html  css  js  c++  java
  • 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;
        },
  • 相关阅读:
    uft/qtp的参数化
    华为数据之道-读书笔记
    python操作neo4j
    PyPDF2提取pdf中的信息
    时间片轮转算法
    百度地图根据类别不同做不同的标注
    操作系统-考点
    《修改代码的艺术》读书笔记
    【2021.07.06】抗争性人格的自我记录
    【2021.06.16】即将到来的毕业
  • 原文地址:https://www.cnblogs.com/fqh123/p/10174246.html
Copyright © 2011-2022 走看看