JSPDF自动图像灰色并在多个图像

Question

当我使用JSPDF自动化时，可以在PDF上创建一个表格，其中一些图像呈灰色并被洗净。看来有些图像出现了，其中一些图像在自己身上重叠。

我正在使用存储在Firebase存储中的文件。我下载它们，然后将它们变成Base64文件，然后尝试将它们添加到我的PDF中。第一个加上罚款，然后其中一些总是最终被洗净。请感谢任何帮助！

    componentDidMount() {
    window.scrollTo(0, 0)

    function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }






    const { item } = this.state;
    console.log(item.files)
    const images = []

    item.files.map((l) => { images.push({ key: l.key, type: 'photo', url: l.fileLink, b64: '' }) });
    item.lineItems.map((l) => { images.push({ key: l.key, type: 'photo', url: l.imageThumb.fileLink, b64: '' }) });




    images.map(async (l, i) => {
        const url = l.url;

        toDataURL(url, (dataUrl) => {
            l.b64 = dataUrl;
        })


        if (i + 1 === images.length) {
            this.setState({ creating: false })
        }

    })




    this.setState({ images })


}



createPDF = async () => {

    d.autoTable({
        startY: 3.9, margin: 1, pageBreak: 'auto', showHead: false,
        body: images.map((l, i) => {
            const index = i + 1;
            const even = index % 2 == 0;
            const color = even === true ? [200, 200, 200] : [255, 255, 255];
            const title = [{ content: `${l.url}`, meta: { key: l.key, img: l.b64 } }]
            return ([...title])
        })

        ,
        columns: [
            { header: 'Test', },
            { header: 'Test', },
        ],

        didDrawCell: async (data) => {
            if (data.cell.raw !== undefined) {

                console.log(data);

                if (data.section === 'body') {
                    console.log("ADD IMAGE")
                    data.row.height = 2

                    const ww = d.getImageProperties(data.cell.raw.meta.img).width;
                    const wh = d.getImageProperties(data.cell.raw.meta.img).height;
                    const ratio = ww / wh;


                    d.addImage(data.cell.raw.meta.img, 'PNG', data.cell.x + .2, data.cell.y, 1.75 * ratio, 1.75, `${data.cell.raw.meta.key}`, 'FAST');


                }


            }
        },



    });

}

这是我遇到的一些错误。在我的控制台。

Answer 1

好吧，在这里，您可以选择其他任何遇到的人。从ArcGIS API中获得数据URL后，请使用此功能。

function getDataUri(url) {
                    return new Promise(resolve => {
                        var image = new Image();
                        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

                        image.onload = function () {
                            var canvas = document.createElement('canvas');
                            canvas.width = this.naturalWidth;
                            canvas.height = this.naturalHeight;

                            //next three lines for white background in case png has a transparent background
                            var ctx = canvas.getContext('2d');
                            ctx.fillStyle = '#fff';  /// set white fill style
                            ctx.fillRect(0, 0, canvas.width, canvas.height);

                            canvas.getContext('2d').drawImage(this, 0, 0);

                            resolve(canvas.toDataURL('image/jpeg'));
                        };

                        image.src = url;
                    })
                }