makeSharePic

立即使用

makePicture openErWeiMa closeErWeiMa createErweimaPic composePic

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码供您参考。

概述

makeSharePic封装了生成类似淘宝联盟分享赚的分享图片,以及生成二维码图片、由两张图片来合成生成一张图片(可自定义上层图片位置)、插入二维码到当前窗口的功能。生成的分享赚图片包含商品展示图、商品标题、现价、原价和二维码等。

生成的分享图片样式如下:

makeSharePic - 图1

composePic接口合成图片示例:

makeSharePic - 图2

makePicture

生成分享图片

注意:该方法只能以同步的方式调用(即不能在调用了一次方法到还没有回调之间的时间内再次调用该方法),若想同时创建多张图片可以采用递归的方式调用该方法。

makePicture({params}, callback(ret, err))

params

imgUrl:

  • 类型:字符串
  • 描述:要分享的图片的路径。支持本地路径和网络url,如:fs://…、cache://…、https://…

savePath:

  • 类型:字符串
  • 描述:(可选项)最终生成图片的本地保存路径,如:cache://image、fs://image等。
  • 注意:不能传空,若不传则默认保存到手机缓存文件夹。

fileName:

  • 类型:字符串
  • 描述:(可选项)最终生成图片的文件名,如:toShare.png。
  • 注意:不能传空,若不传则默认取 imgUrl 参数最后一个斜杠/后面的字符串为文件名。

insertImage:

  • 类型:布尔值
  • 描述:是否把生成的图片插入到本地相册
  • 默认:false
  • 注意:Android中暂不支持!并且Android中设置为true时,将忽略savePath和fileName参数。

qrCode:

  • 类型:字符串
  • 描述:要生成的二维码内容
  • 默认:无

qrImgUrl:

  • 类型:字符串
  • 描述:(可选项)替换图中二维码位置(包含“长按识别二维码”部分)的图片路径。支持本地路径和网络url,如:fs://…、cache://…、https://…
  • 默认:无
  • 注意:本参数不为空时将忽略qrCode参数

erWeiMaErrorL:

  • 类型:字符串
  • 描述:(可选项)二维码的纠错等级 仅Android有效
  • 默认:“H”
  • 取值范围:
    • H //纠错等级为H(最高)
    • Q //纠错等级为Q(高)
    • M //纠错等级为M(一般)
    • L //纠错等级为L(最低)

erWeiMaWidth:

  • 类型:数字
  • 描述:(可选项)Android中为创建二维码时的宽度,Ios中为创建二维码时的正方形边长。(注意:该参数是创建二维码时设置的初始参数,最终的视图会填充到图片的相应位置)
  • 默认:214

erWeiMaHeight:

  • 类型:数字
  • 描述:(可选项)创建二维码时的高度。(注意:该参数是创建二维码时设置的初始参数,最终的视图会填充到图片的相应位置) 仅Android有效
  • 默认:214

expressType:

  • 类型:字符串
  • 描述:对应生成图片的 包邮 内容。

goodTitle:

  • 类型:字符串
  • 描述:对应生成图片的 商品标题 内容。
  • 注意:开头需要以多个空格缩进来避开包邮部分,最大显示行数为3。

nowPriceStatus:

  • 类型:字符串
  • 描述:对应生成图片的 现价描述 内容(如:”现价 :¥20000”)。
  • 注意:模块会自动给¥后面的所有字符串加删除线,显示行数为1。

discountType:

  • 类型:字符串
  • 描述:对应生成图片的 券 内容(如:”券”)。

discountPrice:

  • 类型:字符串
  • 描述:对应生成图片的 券减价格 内容(如:”100元”)。

finalPriceType:

  • 类型:字符串
  • 描述:对应生成图片的 券后价 内容(如:”券后价” “抢购价”等)。
  • 默认:“券后价”

moneyUnit:

  • 类型:字符串
  • 描述:对应生成图片的 券后价价格前面的¥ 内容(如:”¥”)。(如不需要可以设空””)
  • 默认:”¥”

finalPrice:

  • 类型:字符串
  • 描述:对应生成图片的 券后价价格 内容(如:”100.0”)。

isHtmlText:

  • 类型:布尔值
  • 描述:传入的商品信息内容是否是Html格式内容(如:nowPriceStatus 传:”现价 :xml <font color='#FF0000'>¥200</font>")。
  • 默认:false
  • 注意:设置为true时,nowPriceStatus 参数不会自动加删除线;并且因为不同手机支持的浏览器内核不同所以Ios和Android以及Android不同系统版本都需要区别适配。

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. status: true //布尔型,图片生成成功。
  3. filePath"" //字符串,图片文件保存的路径
  4. }

err:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. message"图片生成失败" //字符串,图片生成失败返回
  3. }

示例代码

  1. var makeSharePic = api.require('makeSharePic');
  2. makeSharePic.makePicture({
  3. imgUrl:'http://pic.jj20.com/up/allimg/911/021616153629/160216153629-1.jpg',
  4. qrCode:'二维码内容',
  5. expressType:'包邮',
  6. goodTitle:' 带点吃的算法酸辣粉机啊龙卷风了啦司法所发生是否是发顺丰',
  7. nowPriceStatus:'现价 :¥200',
  8. discountType:'券',
  9. discountPrice:'30元',
  10. finalPriceType:'券后价 ',
  11. finalPrice:'100.0',
  12. // savePath:'cache://image',
  13. // fileName:'share.png',
  14. insertImage:true,
  15. // isHtmlText:true,
  16. },function(ret,err){
  17. if(ret.status){
  18. alert(JSON.stringify(ret));
  19. }else{
  20. alert(err.message);
  21. }
  22. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

openErWeiMa

打开二维码

openErWeiMa({params}, callback(ret, err))

params

rect:

  • 类型:JSON对象
  • 默认值:充满整个父页面
  • 描述:(可选项)二维码视图的位置。
  • 内部字段:
  1. {
  2. x:0, //左上角x坐标
  3. y:0, //左上角y坐标
  4. w:320, //宽度,若传'auto',页面从x位置开始自动充满父页面宽度
  5. h:480 //高度,若传'auto',页面从y位置开始自动充满父页面高度
  6. }

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 默认值:true
  • 描述:(可选项)是否将模块视图固定到窗口上,不跟随窗口上下滚动,可为空

qrCode:

  • 类型:字符串
  • 描述:要生成的二维码内容

erWeiMaErrorL:

  • 类型:字符串
  • 描述:(可选项)二维码的纠错等级 仅Android有效
  • 默认:“H”
  • 取值范围:
    • H //纠错等级为H(最高)
    • Q //纠错等级为Q(高)
    • M //纠错等级为M(一般)
    • L //纠错等级为L(最低)

erWeiMaWidth:

  • 类型:数字
  • 描述:(可选项)Android中为创建二维码时的宽度。(注意:该参数是创建二维码时设置的初始参数,最终的视图会填充到rect区域) 仅Android有效
  • 默认:214

erWeiMaHeight:

  • 类型:数字
  • 描述:(可选项)创建二维码时的高度。(注意:该参数是创建二维码时设置的初始参数,最终的视图会填充到rect区域) 仅Android有效
  • 默认:214

bgColor:

  • 类型:字符串
  • 描述:(可选项)二维码视图的背景颜色,支持“#+6位数的十六进制”的颜色设置(如:”#ff0000”)。

示例代码

  1. var makeSharePic = api.require('makeSharePic');
  2. makeSharePic.openErWeiMa({
  3. rect:{
  4. x:0, //左上角x坐标
  5. y:0, //左上角y坐标
  6. w:320, //宽度,若传'auto',页面从x位置开始自动充满父页面宽度
  7. h:480 //高度,若传'auto',页面从y位置开始自动充满父页面高度
  8. },
  9. qrCode:'二维码内容'
  10. },function(ret,err){
  11. if(err){
  12. alert(JSON.stringify(err));
  13. }
  14. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

closeErWeiMa

关闭当前打开的二维码视图

closeErWeiMa()

示例代码

  1. var makeSharePic = api.require('makeSharePic');
  2. makeSharePic.closeErWeiMa();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

createErweimaPic

将字符串生成二维图片

createErweimaPic({params}, callback(ret, err))

params

width:

  • 类型:数字
  • 默认值:214
  • 描述:(可选项)二维码图片的宽度。

height:

  • 类型:数字
  • 默认值:与 width 相等
  • 描述:(可选项)二维码图片的高度。

margin:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)生成图片的边框宽度 (注意ios中二维码自带4个像素的边框)。

savePath:

  • 类型:字符串
  • 描述:(可选项)最终生成图片的本地保存路径,如:cache://image、fs://image等。
  • 注意:不能传空,若不传则默认保存到手机缓存文件夹。

fileName:

  • 类型:字符串
  • 默认值:”erweimaimg.png”
  • 描述:(可选项)最终生成图片的文件名,如:toShare.png。

qrCode:

  • 类型:字符串
  • 描述:要生成的二维码内容

erWeiMaErrorL:

  • 类型:字符串
  • 描述:(可选项)二维码的纠错等级 仅Android有效
  • 默认:“H”
  • 取值范围:
    • H //纠错等级为H(最高)
    • Q //纠错等级为Q(高)
    • M //纠错等级为M(一般)
    • L //纠错等级为L(最低)

bgColor:

  • 类型:字符串
  • 默认值:Android上透明, ios上为白色背景
  • 描述:(可选项)生成图片的背景颜色,支持“#+6位数的十六进制”的颜色设置(如:”#ff0000”)。

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. status: true //布尔型,图片生成成功。
  3. filePath"" //字符串,图片文件保存的路径
  4. }

err:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. message"图片生成失败" //字符串,图片生成失败返回
  3. }

示例代码

  1. var makeSharePic = api.require('makeSharePic');
  2. makeSharePic.createErweimaPic({
  3. fileName:'test.png',
  4. qrCode:'二维码内容'
  5. },function(ret,err){
  6. if(err){
  7. alert(JSON.stringify(err));
  8. }else{
  9. alert(JSON.stringify(ret));
  10. }
  11. });

可用性

iOS系统,Android系统

可提供的2.0.0及更高版本

composePic

由两张图片合成生成一张图片(可自定义上层图片位置)

composePic({params}, callback(ret, err))

params

bgPicUrl:

  • 类型:字符串
  • 描述:合成图片所需的两张图片中作为底层图片的地址。支持本地路径和网络url,如:fs://…、cache://…、https://…

attachPicUrl:

  • 类型:字符串
  • 描述:合成图片所需的两张图片中作为上层图片的地址。支持本地路径和网络url,如:fs://…、cache://…、https://…

insertImage:

  • 类型:布尔值
  • 描述:是否把生成的图片插入到本地相册
  • 默认:false
  • 注意:Android中暂不支持!并且Android中设置为true时,将忽略savePath和fileName参数。

mainWidth:

  • 类型:数字
  • 默认值:750
  • 描述:(可选项)合成图片的最终宽度。

mainHeight:

  • 类型:数字
  • 默认值:1334
  • 描述:(可选项)合成图片的最终高度。

l:

  • 类型:数字
  • 默认值:0
  • 描述:上层图片相对于合成图片的 左边距(用于定位上层图片left位置)。

t:

  • 类型:数字
  • 默认值:0
  • 描述:上层图片相对于合成图片的 上边距(用于定位上层图片位置)。

subWidth:

  • 类型:数字
  • 默认值:0
  • 描述:(需传大于0的值!)上层图片在最终合成图片中的 宽度(用于定位上层图片位置)。

subHeight:

  • 类型:数字
  • 默认值:与 subWidth 相等
  • 描述:上层图片在最终合成图片中的 高度(用于定位上层图片位置)。

savePath:

  • 类型:字符串
  • 描述:(可选项)最终生成图片的本地保存路径,如:cache://image、fs://image等。
  • 注意:不能传空,若不传则默认保存到手机缓存文件夹。

fileName:

  • 类型:字符串
  • 描述:(可选项)最终生成图片的文件名,如:toShare.png。
  • 注意:不能传空,若不传则默认取 imgUrl 参数最后一个斜杠/后面的字符串为文件名(Android上最多只取最后8位字符)

callback(ret, err)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. status: true //布尔型,图片生成成功。
  3. filePath"" //字符串,图片文件保存的路径
  4. }

err:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. message"图片生成失败" //字符串,图片生成失败返回
  3. }

示例代码

  1. var makeSharePic = api.require('makeSharePic');
  2. makeSharePic.composePic({
  3. bgPicUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516537931764&di=4b25040b2b2117e8656275b3784034ef&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f3dd5a24a450a80120ba38d164b7.jpg',
  4. attachPicUrl:'https://www.apicloud.com/image/png/25/75/25751962eab7a42171c7aa4dc4ba86d0.180x180.png',
  5. fileName:'compose.png',
  6. mainWidth:512,
  7. mainHeight:838,
  8. subWidth:161,
  9. l:176,
  10. t:620,
  11. },function(ret,err){
  12. if(err){
  13. alert(JSON.stringify(err));
  14. }else{
  15. alert(JSON.stringify(ret));
  16. }
  17. });

可用性

iOS系统,Android系统

可提供的2.0.0及更高版本