canvas合成图（js）

// 图片路径

const data = ['./components/invite-poster.jpg', './components/feedback.jpg']

let base64 = []

window.onresize = () => {

window.location.reload()

}

 

draw(() => {

$('.poster-box').innerHTML = '<img src="' + base64[0] + '" id="poster-img">'

let posterWidth = $('#poster-img').width

let posterHeight = $('#poster-img').height

if (+posterWidth >= +posterHeight) {

          $('#poster-img').style.width = $('body').offsetWidth + 'px'

} else {

           $('#poster-img').style.height = $('body').offsetHeight + 'px'

}

})

 

function draw(callback) {

let canvas = document.createElement('canvas')

let context = canvas.getContext('2d')

let len = data.length

let oldWidth

let oldHeight

//  canvas合成的图片会很模糊，用设备的物理像素和设备独立像素处理可解决

let devicePixelRatio = window.devicePixelRatio || 1

let backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1

let ratio = devicePixelRatio / backingStoreRatio

 

function drawing(n) {

if (n < len) {

        /*eslint-disable*/

       let img = new Image()

       img.src = data[n]

       img.onload = () => {

          if (n === 1) {

                     // console.log((c.width - 180) / 2) 

                     context.drawImage(img, (oldWidth - 180) / 2, (oldHeight - 180) / 2, 180, 180)

           } else {

                       //  根据图片宽高比例，设备像素比例设计canvas合成图片模糊bug

                       canvas.width = img.width

                       canvas.height = img.height

                       context.fillStyle = '#fff'

                       context.fill()

                       oldWidth = canvas.width

                       oldHeight = canvas.height

                       canvas.width = oldWidth * ratio

                       canvas.height = oldHeight * ratio

                       canvas.style.width = oldWidth + 'px'

                       canvas.style.height = oldHeight + 'px'

                       context.scale(ratio, ratio)

 

                      context.drawImage(img, 0, 0)

        }

       drawing(n + 1)

    }

} else {

          // 保存生成作品图片

         base64.push(canvas.toDataURL('image/jpeg', 0.8))

         callback()

}

}

drawing(0)

}

参考文章：

https://blog.csdn.net/anmoran/article/details/54343380

https://blog.csdn.net/u013239233/article/details/70210755/