【发布时间】：2020-10-18 04:52:06
【问题描述】：
我已经修改了来自 repo 的代码来裁剪图像。 目标是上传文件。采用可接受的格式。裁剪文件，然后将其下载或上传到 cloudinary。
当我上传 svg 并裁剪文件时，下载的文件是“.png”。请帮助我进行调试。
handleDownloadClick = (event) => {
event.preventDefault();
const { imgSrc } = this.state;
//To handle the name of the file while downloading
var fileName = `${this.fileInputRef.current.files[0].name}`;
var remove_after = fileName.indexOf(".");
var finalFileName = fileName.substring(0, remove_after);
if (imgSrc) {
const canvasRef = this.imagePreviewCanvasRef.current;
const { imgSrcExt } = this.state;
console.log(imgSrcExt);
const imageData64 = canvasRef.toDataURL("image/" + imgSrcExt);
const myFilename = `${finalFileName}`;
// file to be uploaded
const myNewCroppedFile = base64StringtoFile(
imageData64,
myFilename
);
console.log(myNewCroppedFile);
// download file
downloadBase64File(imageData64, myFilename);
this.handleClearToDefault();
}
};
【问题讨论】：
-
image/svg不是画布可以导出的类型 - 因为 SVG 实际上不是图像，但画布是（SVG 不直接保存任何像素数据，除非作为其他东西嵌入）。如果您尝试将image/svg作为输出，canvas 将忽略它并仅使用image/png作为默认值，因为该值无效。 -
您好，感谢您提供的信息。有没有办法将图像下载为 svg
-
从文件中加载 SVG 节点，修改节点本身以进行裁剪，然后将更改后的 SVG 节点作为文本上传。
SVG data !== pixels根本没有，所以通过画布会破坏你的 svg 数据。您需要修改 SVG 根目录上的viewBox属性以“裁剪”一个 svg，但我预见到很多例外情况会使它变得复杂。为什么还需要裁剪 SVG？通常它只是不被接受的裁剪文件格式。