要了本文想要完成的任务，请查看上面的图片。左侧是原始图像，右侧是新图像预览。我们可以移动裁剪框并调整其大小，预览图像也会随之改变。用户可以根据需要下载预览图像。https://fengyuanchen.github.io/cropperjs/ 】的库完成繁重的工作。使用图像裁剪依赖项创建一个新的Vue.js项目https://fengyuanchen.github.io/cropperjs/ 】。

虽然安装了我们的依赖项，但还有一件事需要去做。因为用的是 npm，所以不包含CSS信息 —— 只包含 JavaScript 信息。我们需要在本地或通过 CDN 包含 CSS信 息。本文使用CDN。

 
   
     
     
     
     
     
     
  
  
    
    

    
  

在Vue.js项目中使用JavaScript裁剪图像文件，并包含以下样板代码：燑/p>





块中出现的 src 和 destination 变量。这些变量表示用户通过 props 对象定义的源图像，以及已经被操作的目标图像。我们将能够通过 ref 变量直接访问源图像，这类似于在 DOM 对象上使用 querySelector 。
 mounted() {
   this.image = this.$refs.image;
   this.cropper = new Cropper(this.image, {
     zoomable: false,
     scalable: false,
     aspectRatio: 1,
     crop: () => {
       const canvas = this.cropper.getCroppedCanvas();
       this.destination = canvas.toDataURL("image/png");
    }
  });
}块中的图像的引用。然后在初始化裁剪工具时使用图像，同时定义一些配置，这些配置并不是强制性的。


 

如果你想了解如何上传文件（如裁剪图像），可以查看我之前的教程“通过 Vue.js 将文件上传到远程Web服务”https://www.thepolyglotdeveloper.com/2017/12/upload-files-remote-web-service-vuejs-web-application/ 】。结论

以上所述是小编给大家介绍的用Vue.js在浏览器中裁剪图像功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！