• uni-app canvas创建画布


    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);
                    });

  • 相关阅读:
    分布式系列精讲 分布式系统和单体系统之间到底有什么区别?
    STM32F103ZET6_ADC
    (十一) 跨平台修图软件GIMP及其批处理插件
    【TypeScript】什么是字面量类型、类型推断、类型拓宽和类型缩小?
    facebook群控如何做?使用静态住宅ip代理有什么好处?
    一文搞懂如何自己写一个Python库
    python的前缀树(字典树)
    2022计算机保研夏令营记录
    MySQL的自增id会用完吗?用完怎么办?
    【算法挨揍日记】day11——852. 山脉数组的峰顶索引、162. 寻找峰值
  • 原文地址:https://blog.csdn.net/Edwin_jade/article/details/139642345