You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

html2canvas.vue 1.6 KiB

2 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view>
  3. <view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
  4. <slot></slot>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. import { base64ToPath } from '@/static/libs/image-tools.js';
  10. export default {
  11. name: 'html2canvas',
  12. props: {
  13. domId: {
  14. type: String,
  15. required: true
  16. }
  17. },
  18. methods: {
  19. async renderFinish(base64) {
  20. try{
  21. const imgPath = await base64ToPath(base64, '.jpeg');
  22. this.$emit('renderFinish', imgPath);
  23. }catch(e){
  24. //TODO handle the exception
  25. console.log('html2canvas error', e)
  26. }
  27. },
  28. showLoading() {
  29. uni.showToast({
  30. title: "正在生成海报",
  31. icon: "none",
  32. mask: true,
  33. duration: 100000
  34. })
  35. },
  36. hideLoading() {
  37. uni.hideToast();
  38. }
  39. }
  40. }
  41. </script>
  42. <script module="html2canvas" lang="renderjs">
  43. import html2canvas from 'html2canvas';
  44. export default {
  45. methods: {
  46. async create(domId) {
  47. try {
  48. this.$ownerInstance.callMethod('showLoading', true);
  49. const timeout = setTimeout(async ()=> {
  50. const shareContent = document.querySelector(domId);
  51. const canvas = await html2canvas(shareContent,{
  52. width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同,防止白边
  53. height: shareContent.offsetHeight,//防止白边
  54. logging: true,
  55. useCORS: true
  56. });
  57. const base64 = canvas.toDataURL('image/jpeg', 1);
  58. this.$ownerInstance.callMethod('renderFinish', base64);
  59. this.$ownerInstance.callMethod('hideLoading', true);
  60. clearTimeout(timeout);
  61. }, 500);
  62. } catch(error){
  63. console.log(error)
  64. }
  65. }
  66. }
  67. }
  68. </script>
  69. <style lang="scss">
  70. </style>