全国服务热线:4008-888-888

技术知识

canvas缩小照片和卡片制做的方式示例

在做1些主题活动页的情况下,常常会有1些必须提交照片的要求,而且还必须将照片和转化成的文本和贴图转化成1张卡能够供客户能够长按储存。这个要求以前进行过1次,近期又遇到了,应用的全是canvas来完成的。果断梳理出1篇blog出来。假如有更好的完成方式,欢迎提出1起讨论。

应用canvas缩小照片

在html中应用写入input标识,type为file情况下,能够调出手机上的相册可供挑选相片,还可以适用摄像头开展照相作用。在这个情景下,便可能出現照片的体积会更大,将会会超过后端开发所适用的最大范畴,从而致使提交不成功。

<input id="file" type="file">

1.最先要先获得到照片文档

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    console.log(file)
    // 挑选的文档是照片
    if (file.type.indexOf("image") == 0) {
      reader.readAsDataURL(file);    
    }
  });

2.这个情况下就取到了照片文档,就迫不得已掌握1下js中FileReader目标的应用了

FileReader目标容许Web运用程序流程多线程载入储存在客户测算机上的文档(或初始数据信息缓存区)的內容

方式:

方式名 主要参数 叙述 abort none 终断载入 readAsBinaryString file 2进制码 readAsDataURL file 将文档载入为 DataURL readAsText file, [encoding] 将文档载入为文字

  • readAsText:该方式有两个主要参数,在其中第2个主要参数是文字的编号方法,默认设置值为 UTF⑻。这个方式十分非常容易了解,将文档以文字方法载入,载入的結果就是这个文字文档中的內容。
  • readAsBinaryString:该方式将文档载入为2进制标识符串,一般大家将它传输到后端开发,后端开发能够根据这段标识符串储存文档。
  • readAsDataURL:这是事例程序流程选用到的方式,该方式将文档载入为1段以 data: 开始的标识符串,这段标识符串的本质便是 Data URL,Data URL是1种将小文档立即嵌入文本文档的计划方案。这里的小文档一般是指图象与 html 等文件格式的文档。(在其中base64的方法便是由此来得到的。。)

FileReader解决恶性事件简介

恶性事件 叙述 onabort 终断时开启 onerror onabort onload 文档载入取得成功进行时开启 onloadend 载入进行开启,不管取得成功或不成功 onloadstart 载入刚开始时开启 onprogress 载入中

再次上面的实际操作,在拿到照片以后,必须将文档开展解决转换,此时

var reader = new FileReader(); 
//将文档以Data URL方式读入网页页面 
  reader.readAsDataURL(file); 
  reader.onload=function(e) { 
    console.log(reader)
  } 

如今取到了照片也开展了转换,如今能够开展缩小了。

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // console.log(file)
    // 挑选的文档是照片
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader(); 
      //将文档以Data URL方式读入网页页面 
        reader.readAsDataURL(file); 
        reader.onload=function(e) { 
          // console.log(this.result)
          var pre=document.getElementById("pre"); 
          pre.setAttribute("src", this.result)
          canvasDataURL(this.result, 100, 0.5)
        }     
    }
  })
  /* [canvasDataURL    根据canvas开展缩小]
   * @params path  照片的base64的文件格式
   * @params targetWidth  缩小后照片的宽度  
   * @params quality 照片品质  quality值越小,所绘图出的图象越模糊不清
   */
  function canvasDataURL(path, targetWidth, quality) {
    var img = new Image();
    img.src = path
    img.onload = function () {
        // var that = this
        // console.log(that)
        // 默认设置按占比缩小
        var w = this.width
        var h = this.height
        scale = w / h;
        w = targetWidth
        h = targetWidth / scale
        var quality = quality;  // 默认设置照片品质为0.7
        //转化成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 建立特性连接点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(this, 0, 0, w, h);
        // quality值越小,所绘图出的图象越模糊不清
        var base64 = canvas.toDataURL('image/jpeg', quality);
        var result=document.getElementById("result"); 
        result.setAttribute("src", base64)
    }
  }

很简易,这样便可以获得缩小后的照片了,从以上的编码可获知,基本原理在于canvas中的toDataURL方式可特定照片缩小后的文件格式及缩小品质,把canvas信息内容缩小并变为base64编号来完成缩小。

应用canvas制做卡片

情景:把不久缩小以后的照片与另外一张照片相融合,可长按开展储存。

function drawCanvas (target) {
    var canvas = document.querySelector('#myCanvas')
    var ctx = canvas.getContext('2d')
    // 是机器设备上物理学像素和机器设备单独像素(device-independent pixels (dips))的占比
    var dp = window.devicePixelRatio || 1
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    var ratio = this.dp / this.backingStoreRatio
    var oldWidth = canvas.width
    var oldHeight = canvas.height
    canvas.width = oldWidth * ratio
    canvas.height = oldHeight * ratio
    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'
    ctx.scale(ratio, ratio)
    var headerImg = new Image()
    var bgImg = new Image()
    headerImg.src = target
    bgImg.src = '../bg.png'
    headerImg.onload = (e) => {
      // 照片的宽高比
      var rate = headerImg.width / headerImg.height
      console.log(rate)
      bgImg.onload = (e) => {
        ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
        // 情况照片
        ctx.drawImage(bgImg, 0, 0, 150, 150)
        ctx.fillText('强大啊', 80, 70)
        var resultImg = new Image()
        resultImg.src = canvas.toDataURL('image/png', 1)
        resultImg.style.width = '100%'
        var cardImg=document.getElementById("cardImg"); 
        cardImg.setAttribute("src", resultImg.src)
      }
    }

取到不久获得的照片,在图象装载结束时后将其画到画布上,还可以配上文本这些,最终也是把canvas的信息内容变为base64编号来开展完成 。能够根据编码来开展案例的实践活动

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服