import ImgToPixel from 'imgtopixel'
let canvas = document.getElementById('domCanvas')
let canvasCtx = canvas.getContext('2d')
let globalImg = document.getElementById('img')
let globalImgHandle = null
ImgToPixel.getImgObjByUrl('http://statics.h-five.com/withme.jpg', function(img) {
let imgSize = getImgDomSize()
let handle = new ImgToPixel({
imgObj: img,
width: imgSize.w,
height: imgSize.h
})
handle.forEach(ImgToPixel.EffectFunction.Gray)
handle.forEachAsync(ImgToPixel.EffectFunction.Gray, 1000)
.then(() => {
let base64Img = handle.toBase64()
})
let base64Img = handle.toBase64()
})
let fileBox = document.getElementById('fileBox')
fileBox.addEventListener('change', function(evt) {
let file = evt.target.files[0]
let img = ImgToPixel.getImgObjByFile(file).then((data) => {
img = data
updateSourceImg(img)
ImgToPixel.getImgObjByUrl(img, function(img) {
let imgSize = getImgDomSize()
let handle = new ImgToPixel({
imgObj: img,
width: imgSize.w,
height: imgSize.h
})
globalImgHandle = handle
handle.forEach(ImgToPixel.EffectFunction.Gray)
handle.forEachAsync(ImgToPixel.EffectFunction.Gray, 1000)
.then(() => {
let base64Img = handle.toBase64()
})
let base64Img = handle.toBase64()
})
})
})
function getImgDomSize() {
let style = getComputedStyle(globalImg, null)
let w = parseInt(style.width)
let h = parseInt(style.height)
return {
w: w,
h: h
}
}
