图片编辑

by 苹果熊

HTML

<canvas width="300" height="300" id="demo"></canvas>
<p><input type="range" step="5" min="200" max="255" id="red"></p>
<p><input type="file" id="file"></p>

JavaScript

var cvs = document.getElementById('demo'),
		red = document.getElementById('red'),
    file = document.getElementById('file'),
		ctx = cvs.getContext('2d'),
    w = cvs.width,
    h = cvs.height,
    len = w * h * 4


function changeStyle(value) {
	var imgdata = ctx.getImageData(0, 0, w, h)
  for(var i = 0; i < len; i += 4) {
  	imgdata.data[i + 3] = value
  }
  ctx.putImageData(imgdata, 0, 0)
}
//changeStyle()

file.onchange = function() {
	var $filedata = new FileReader()
  $filedata.readAsDataURL(this.files[0])
  $filedata.onload = function() {
  	var img = new Image()
    img.src = this.result
    img.onload = function() {
    	ctx.clearRect(0, 0, w, h)
			ctx.drawImage(img, 0, 0, w, h)
    }
  }
}
red.oninput = function() {
	changeStyle(this.value)
}