踩坑记录之【canvas实现截图功能】

需求：在web端做海报编辑器的时候需要实现图片保存功能

主体解决思路：通过canvas2html实现；

如何解决图片模糊的问题

增大scale来实现分辨率的提高，一般去2~5，如过倍数过高，图片文件过大，图片生成时间会变长，影响用户体验

如何解决自定义字体的问题：

font-face；

待解决：图片生成后顶部会有白边，也就是实际图片会有向下偏移量。（欢迎朋友圈讨论提出想法）

本人在网上看了其他人的做法，一种做法是通过将scrollY参数设为0

另外一种做法是用getContext()获取绘图环境，用getBoundingClientRect()获取画板相对于视窗的偏移量，然后用translate方式进行纠偏，通览各方法后本人觉得此法相对靠谱，但也没有成功，附上博客链接www.cnblogs.com/stt-bky/p/9…

贴一下code

    save = () => {
        let { openNum } = this.props;
        if (this.state.imgUrl !== null || openNum === 4) {
            let wrapperRef = this.wrapperRef;
            let width = wrapperRef.offsetWidth;
            let height = wrapperRef.offsetHeight;
            let scale = 4;
            let canvas = document.createElement('canvas');
            canvas.width = width * scale;
            canvas.height = height * scale;
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';
            let context = canvas.getContext('2d');
            context.scale(scale, scale);
            message.warning("头图正在生成，请稍等")
            html2canvas(wrapperRef, {
                scale: 1,
                canvas: canvas,
                allowTaint: true,
                useCORS: true,
                scrollY: 0,
            }).then((canvas) => {
                canvas.crossOrigin = 'anonymous'
                let url = canvas.toDataURL('image/png')
                let imageBlob = dataURItoBlob(url);
                let formData = new FormData();
                formData.append("file", imageBlob, "a.png");
                request.post(`${process.env.uploadUrlUncompressed}`, formData).then(res => {
                    this.props.handlePictureUrl(res.data)
                    this.setState({ imgUrl: null })
                    this.props.hidePictureDesign()
                })
            })
        } else {
            message.error("请上传图片！")
        }
    };