当前位置:   article > 正文

uni-app canvas创建画布_uniapp画布uni.getimageinfo微信小程序网络获取不到图片

uniapp画布uni.getimageinfo微信小程序网络获取不到图片
  1. canvasTmp: function(arr2, store_name, successFn, errFun) {
  2. let that = this;
  3. const ctx = uni.createCanvasContext('myCanvas');
  4. ctx.clearRect(0, 0, 0, 0);
  5. /**
  6. * 只能获取合法域名下的图片信息,本地调试无法获取
  7. *
  8. */
  9. uni.getImageInfo({
  10. src: arr2[0],
  11. success: function(res) {
  12. const WIDTH = res.width*0.71;
  13. const HEIGHT = res.height*1.04;
  14. // const WIDTH = 320;
  15. // const HEIGHT = 450;
  16. let r = 70;
  17. let d = r * 2;
  18. let cx = 85;
  19. let cy = 110;
  20. ctx.drawImage(arr2[1], 0, 0, WIDTH, HEIGHT); // 小图
  21. ctx.save();
  22. ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);
  23. ctx.drawImage(arr2[0], cx, cy, d, d); // 背景
  24. ctx.restore();
  25. const CONTENT_ROW_LENGTH = 40;
  26. let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);
  27. if (contentRows > 2) {
  28. contentRows = 2;
  29. let textArray = contentArray.slice(0, 2);
  30. textArray[textArray.length - 1] += '……';
  31. contentArray = textArray;
  32. }
  33. ctx.setTextAlign('center');
  34. ctx.setFontSize(26); // 文字
  35. ctx.setFillStyle('#000000');
  36. let contentHh = 26 * 1.3;
  37. for (let m = 0; m < contentArray.length; m++) {
  38. ctx.fillText(contentArray[m], 156, 430 + contentHh * m);
  39. }
  40. ctx.setTextAlign('left')
  41. ctx.setFontSize(28);
  42. ctx.setFillStyle('#FFFFFF');
  43. ctx.draw(true, function() {
  44. uni.canvasToTempFilePath({
  45. canvasId: 'myCanvas',
  46. fileType: 'png',
  47. destWidth: WIDTH,
  48. destHeight: HEIGHT,
  49. success: function(res) {
  50. uni.hideLoading();
  51. successFn && successFn(res.tempFilePath);
  52. },
  53. fail: function(err) {
  54. uni.hideLoading();
  55. errFun && errFun(err);
  56. }
  57. })
  58. });
  59. },
  60. fail: function(err) {
  61. uni.hideLoading();
  62. that.Tips({
  63. title: '无法获取图片信息'
  64. });
  65. errFun && errFun(err);
  66. }
  67. })
  68. },

调用 : 

  1. async spreadMsg(image ,name, title) {
  2. let that = this
  3. /** #ifndef H5 type: 'h5', #endif #ifdef MP || APP || APP-PLUS #endif*/
  4. let rqData = {
  5. type: 'routine'
  6. }
  7. that.spreadData = [that.bgurl[that.type]]
  8. that.nickName = name
  9. that.siteName = title
  10. let codeUrl = ""
  11. // #ifdef MP || APP-PLUS
  12. let mpUrl = await that.downloadFilestoreImage(image)
  13. // #endif
  14. uni.showLoading({
  15. title: '海报生成中',
  16. mask: true
  17. });
  18. // 本来这个是个循环 也就是出现多个海报 去除了
  19. let arr2
  20. // #ifdef MP || APP-PLUS
  21. arr2 = [mpUrl, await that.downloadFilestoreImage(that.bgurl[that.type])]
  22. // #endif
  23. // #ifdef H5
  24. let img = await that.imgToBase(that.bgurl[that.type])
  25. arr2 = [await that.imgToBase(image), img]
  26. // #endif
  27. that.$util.canvasTmp(arr2, name, (tempFilePath) => {
  28. that.$set(that.posterImage, 0, tempFilePath);
  29. }, (err) => {
  30. that.$set(that, 'canvasStatus', false);
  31. });
  32. uni.hideLoading();
  33. },

that.$util.PosterCanvasMer(arr2, name, (tempFilePath) => {
                    that.$set(that.posterImage, 0, tempFilePath);
                }, (err) => {
                    that.$set(that, 'canvasStatus', false);
                });

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/741687
推荐阅读
相关标签
  

闽ICP备14008679号