通过canvas作图片缓存

通过canvas作图片缓存

测试环境在uniapp中

  1. <template>
  2. <view class="content">
  3. <image class="logo" src="/static/logo.png"></image>
  4. <view class="text-area">
  5. <text class="title">{{title}}</text>
  6. <view class="">
  7. <image :src="imgSrc" mode=""></image>
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. title: 'Hello',
  17. imgSrc: '/static/logo.png'
  18. }
  19. },
  20. onLoad() {
  21. var that = this;
  22. that.loadPic();
  23. },
  24. methods: {
  25. loadPic(){
  26. var that = this;
  27. var url = "https://n.sinaimg.cn/spider20210721/200/w640h360/20210721/e9be-15a5a455644ce32c9bbfc8103a65ae39.jpg";
  28. uni.getImageInfo({
  29. src: url,
  30. success(res) {
  31. let img = new Image();
  32. img.setAttribute("crossOrigin",'Anonymous')
  33. img.src = res.path;
  34. console.log(img)
  35. let canvas = document.createElement('canvas');
  36. var ctx = canvas.getContext("2d");
  37. img.onload = function(e){
  38. var path = img;
  39. ctx.drawImage(path, 0, 0)
  40. var baseStr = canvas.toDataURL("image/jpeg", 1);
  41. that.imgSrc = baseStr;
  42. }
  43. }
  44. });
  45. }
  46. }
  47. }
  48. </script>
  49. <style>
  50. .content {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. justify-content: center;
  55. }
  56. .logo {
  57. height: 200rpx;
  58. width: 200rpx;
  59. margin-top: 200rpx;
  60. margin-left: auto;
  61. margin-right: auto;
  62. margin-bottom: 50rpx;
  63. }
  64. .text-area {
  65. display: flex;
  66. justify-content: center;
  67. }
  68. .title {
  69. font-size: 36rpx;
  70. color: #8f8f94;
  71. }
  72. </style>