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;
        },
  • 相关阅读:
    oob中程序的监视
    使用内联 XAML
    silverlight 导航注意点
    动画入门,用actionscript实现A*寻路算法【游戏自动寻路】 转
    Remoting 转
    XSD文件 转
    Security 转
    游戏开发(程序)职位招聘的一些感受和经验 转
    WCF 转
    WPF 转
  • 原文地址:https://www.cnblogs.com/fqh123/p/10174246.html
Copyright © 2011-2022 走看看