使用canvas截图

/**
*   @params url     String    截图图片的url
*   @params x       Int       开始截图的位置x轴
*   @params y       Int       开始截图的位置y轴
*   @params width   Int       截图的宽度
*   @params height  Int       截图的高度
*   @params cb      function  截图成功后执行回调， 回调有一个参数，图片的base64字符串
*/
function slicing (url, x, y, width, height, cb) {
    const Origin = document.createElement('canvas')
    const OriginContext = Origin.getContext('2d')
    const Section = document.createElement('canvas')
    const SectionContext = Section.getContext('2d')
    const img = new Image()
    let imgData = null

    img.onload = () => {
        Origin.width = img.width
        Origin.height = img.height
        OriginContext.drawImage(img, 0, 0)
        //document.body.appendChild(Origin)
        var imgData = OriginContext.getImageData(x, y, width, height)

        Section.width = width
        Section.height = height
        SectionContext.putImageData(imgData, 0, 0)
        // document.body.appendChild(Section)
        cb && cb(Section.toDataURL("image/jpeg", 0.3))
    }
    img.src = url
}

var slicing = (url) => (x, y, width, height) => {
    return new Promise((resolve, reject) => {
        const Origin = document.createElement('canvas')
        const OriginContext = Origin.getContext('2d')
        const Section = document.createElement('canvas')
        const SectionContext = Section.getContext('2d')
        const img = new Image()
        let imgData = null
        img.onload = () => {
            Origin.width = img.width
            Origin.height = img.height
            OriginContext.drawImage(img, 0, 0)
            imgData = OriginContext.getImageData(x, y, width, height)
            Section.width = width
            Section.height = height
            SectionContext.putImageData(imgData, 0, 0)

            resolve(Section.toDataURL('image/jpeg', 0.3))
        }
        img.src = url
    })
}

// 方式一 调用
// var slicingURL = slicing('./PROCESS1_T5A466Q04PB_PRODUCT1_248.050_-465.929_O_M_20160701_image1.jpg')
// Promise.all([slicingURL(0, 0, 100, 100), slicingURL(100, 100, 100, 100), slicingURL(200, 200, 100, 100)])
//     .then((base64Arr) => {
//         console.log(base64Arr)
//     })

/**
* {
    url: './PROCESS1_T5A466Q04PB_PRODUCT1_248.050_-465.929_O_M_20160701_image1.jpg',
    param: [[0, 0, 100, 100], [100, 100, 100, 100]]
}
* 
{
    url: './PROCESS1_T5A466Q04PB_PRODUCT1_248.050_-465.929_O_M_20160701_image1.jpg',
    param: [100, 100, 100, 100]
}
*/
var slicing = ({url, param}) => {
return new Promise((resolve, reject) => {
    const Origin = document.createElement('canvas')
    const OriginContext = Origin.getContext('2d')
    const Section = document.createElement('canvas')
    const SectionContext = Section.getContext('2d')
    const img = new Image()
    let imgData = null
    img.onload = () => {
        Origin.width = img.width
        Origin.height = img.height
        OriginContext.drawImage(img, 0, 0)
        if (param[0] instanceof Array) {
            const base64Arr = param.map(item => {
                imgData = OriginContext.getImageData(item[0], item[1], item[2], item[3])
                Section.width = item[2]
                Section.height = item[3]
                SectionContext.putImageData(imgData, 0, 0)
                return Section.toDataURL('image/jpeg', 0.3)
            })

            resolve(base64Arr)
        } else {
            imgData = OriginContext.getImageData(param[0], param[1], param[2], param[3])
            Section.width = param[2]
            Section.height = param[3]
            SectionContext.putImageData(imgData, 0, 0)

            resolve(Section.toDataURL('image/jpeg', 0.3))
        }
        
    }
    img.src = url
})
}

slicing({
url: './PROCESS1_T5A466Q04PB_PRODUCT1_248.050_-465.929_O_M_20160701_image1.jpg',
param: [100, 100, 100, 100]
})
.then(data => {
    console.log(data)
})
// slicing({
//     url: './PROCESS1_T5A466Q04PB_PRODUCT1_248.050_-465.929_O_M_20160701_image1.jpg',
//     param: [[0, 0, 100, 100], [100, 100, 100, 100]]
// })
//     .then(data => {
//         console.log(data)
//     })