uniapp圖片分享qq

根據(jù)uniapp官網(wǎng)上的組件https://uniapp.dcloud.io/api/plugins/share進行微信,qq分享。微信分享看文檔即可,今天主要說一說圖片分享qq,及遇到的一些坑。

一、源碼

代碼1,html代碼。

<canvas canvas-id="myCanvas" style="border:1px solid #c3c3c3;visibility: hidden;position: fixed;min-width: 300px;min-height: 400px;"></canvas>

代碼2,將圖片放入canvas中。

// app生成canvas預覽圖

createCanvas(){

const ctx = uni.createCanvasContext('myCanvas');

ctx.beginPath();

ctx.drawImage( this.Logo );

ctx.draw();

console.log(ctx);

},

代碼3,分享。

uni.canvasToTempFilePath({

canvasId: 'myCanvas',

fileType: 'jpg',

success: res=> {

? ? // 在H5平臺下,tempFilePath 為 base64

? console.log(res.tempFilePath)

? uni.share({

provider: 'qq',

type: 2,

Scene : "WXSenceTimeline",

// url:strurl,

title: '知識島',

// summary: strShareSummary,

imageUrl: res.tempFilePath,

success: function(res) {

console.log("success:" + JSON.stringify(res));

},

fail: function(err) {

console.log("fail:" + JSON.stringify(err));

uni.showToast({

title: '分享失敗',

position: 'bottom'})}}) }})

以上代碼就實現(xiàn)了圖片分享qq。

二、遇到的坑及解決方法

????????一開始按照分享微信的方法來做分享qq,但是一直報錯圖片非法路徑,后來百度了很多,發(fā)現(xiàn)qq分享圖片地址必須是本地(這也太坑,就是圖片地址不能是網(wǎng)絡圖片)。我有百度了很多,發(fā)現(xiàn)我無法獲取本地圖片地址,而且app上的圖片本身就是網(wǎng)絡上的,需要保存本地才能分享,wtf。

最后的解決辦法是:線將圖片保存到canvas,然后用uni.canvasToTempFilePath獲取預覽地址,然后放到uni.share后就可以了,wtm真是個天才。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 最近有做一個關于自定義內容之后生成圖片,用作分享使用.研究了一下,實現(xiàn)有兩種方案:1.服務端生成模板,通過...
    Mr_Atom閱讀 7,436評論 0 2
  • 導語:在小程序項目開發(fā)中,分享能力幾乎是每個項目必備的要求,但原生的分享能力比較有限,不夠靈活,今天就我們就一起來...
    極樂叔閱讀 1,915評論 1 11
  • 第一次接觸canvas,我是抗拒的,但是多接觸幾次,還有參考一下別人的思路順便結合文檔,上手應該算是成功了(代碼亂...
    菜雞xiaojian閱讀 507評論 0 0
  • 問題: 圖片上傳后保存的圖片跟原圖不一致,還要待研究 //選擇圖片 chooseImg(e) { let t...
    wangwing閱讀 1,666評論 0 0
  • 一組 李美嫻 錢程-----我們的班長在我們印象中他總是很嚴肅地管理著班里的事務。并且鐵面無私,哪...
    筱竹華倩閱讀 463評論 0 1

友情鏈接更多精彩內容