하나는 코드를 JS :
이미지 압축 //
// 파일 이미지 파일 (필수)
//의 maxWidth가 의무적 폭 제한
// 완료 콜백 방법 (선택) 콜백 압축
압축 (파일의 maxWidth,의 maxHeight, 콜백) {// 수신을 건너 이미지
, VAR는이 것을 =
// 원본 이미지 정보를 얻기
wx.getImageInfo ({
파일, 상기 SRC
성공 : 기능 (RES) {
wx.showLoading을 ({
제목 : "이미지 로딩은"
마스크 : true로
})
VAR 폭 = RES .width, 높이 = res.height;
IF (폭>의 maxWidth) {
// 폭이 한계를 초과
, 높이 = (의 maxWidth / 폭) * 높이
, 폭 =에서는 parseInt (의 maxWidth)
}
IF (res.height> &&의 maxHeight의 maxHeight) {
// 한계 높이를 넘어
VAR 비 = that.data.thumbHeight / res.height // 비율 계산
, 폭 = (의 maxHeight / 높이) * width.toFixed (2)
의 높이 = maxHeight.toFixed (2)
}
that.setData ({thumbWidth : 폭 , thumbHeight :;} 높이) // 캔버스의 폭과 높이로 설정
":"송출 roleNameInfo = that.data.RoleName +] + that.data.RealName
송출 된 util.date_time 시간 = ();
는 houseLocation = that.data하자. HouseLocation;
// 압축 이미지 스케일링
CONST CTX wx.createCanvasContext = ( 'firstCanvas');
ctx.drawImage (파일, 0, 0, 폭, 높이); // 첫번째 픽처 그릴
캔버스에 시간 // 선언
ctx.setFontSize (18) // 참고 : 텍스트 크기, 텍스트 패딩 전에 배치해야하며, 효과가 적용되지 않습니다
ctx.setFillStyle ( '흰색');
ctx.fillText (roleNameInfo, 5, 높이 - 62);
ctx.setFontSize (14);
ctx.fillText (시간, 5, 높이 - 45);
// ctx.fillText (houseLocation, 5, 높이 - 30);
VAR 선폭 = 0;
VAR lastSubStrIndex = 0; //每次开始截取的字符串的索引
대 (I = 0하자 나는 <houseLocation.length; I ++) {
선폭 + = ctx.measureText (houseLocation [I])의 폭.;
(선폭> 폭 = 10) {경우
ctx.fillText (houseLocation.substring (lastSubStrIndex, I), (5), 높이 - 30); //绘制截取部分
lastSubStrIndex = 1;
난 houseLocation.length + = 2;
}
}
경우 (lastSubStrIndex <houseLocation.length) {
ctx.fillText (houseLocation.substring (lastSubStrIndex), 5, 높이 - 15);
}
// 경우 (lastSubStrIndex <houseLocation.length) {
// ctx.fillText (houseLocation.substring (lastSubStrIndex, houseLocation.length - lastSubStrIndex), 5, 높이 - 15);
//}
ctx.draw (거짓, 기능 () {
에서는 setTimeout (함수 () {
//绘画完成回调
//生成图片
wx.canvasToTempFilePath ({
canvasId 'firstCanvas',
성공 : 기능 (RESS) {
wx.hideLoading ( );
wx.saveImageToPhotosAlbum ({// 워터 마크 이미지 저장 앨범
여기서 filePath : ress.tempFilePath,
성공 (RESP) {
}
})
CONSOLE.LOG (ress.tempFilePath) // ress.tempFilePath 경로 이미지 워터 마크 처리되는
콜백 == "기능"&& 콜백 (RESS) 대해서 typeof;
}
} )
}, 600)
})
}
})
}
위의 그림이 전체 과정을 워터 마크되어, ctx.draw 방법은 개발에 버그가 되었기 때문에 캔버스이 관심이없는으로 직접 그린 경우 600 밀리 초 지연의 추가, 그래서 작은 구덩이가,가, 비동기 당신이 지정된 페이지 위치에 표시되는 워터 마크와 함께 사진 앨범 또는 사진에 워터 마크와 무승부를 얻기 위해 사진을 저장하려는 경우, 당신은 지연 방법을 추가해야합니다.
워터 마킹 된 콘텐츠는, 상기 방법은 주로 텍스트 정보의 크기를 측정하기 위해, 텍스트 축적 단어가 각 측정 사이클의 폭을 폭을 반환 할 수, ctx.measureText 사용되고, 텍스트, 여기에 관련된 문제는 개행 문자이다 경우> 시간 = 지정된 폭 수행 문자 테마 및 캔버스 인터셉트 된 텍스트 fillText 채우는 상기 우리 때문에 개발, 배치 텍스트만을 포함 실제 상황에 따라 해당 처리를 수행 할 필요가 충전 높이 두 줄은, 그래서 높이에 엄격한 치료가 없다.
이 wxml 아래 2, 조금 넣어
< 캔버스 스타일 = "폭 : {{}} thumbWidth 픽셀, 높이 : {{}} thumbHeight PX; 테두리 : 1 픽셀의 빈틈없는 흑색; 총수 : 절대; 남아 -1000 픽셀, 상단 : -1000 픽셀;" 캔버스-ID = "firstCanvas" > </ 캔버스 >
나는 사용자가 업로드 워터 마크 이미지를 한 후보고, 여러 요구를 업로드 할 때문에 모든 시간이 그냥있을 캔버스 컨테이너 캐리어로 사용할 수 있도록 위의 코드는, 숨겨진 캔버스입니다.
업로드하는 다른 방법에 대한 3,
// 이미지 선택
chooseImage (E) {
; VAR은 =이 본 _this
wx.chooseImage ({
[ '원본', '압축'] // 원본 이미지 또는 압축 선택 SizeType
[ '카메라']를 SOURCETYPE 카메라를 선택적으로 개방 접속 //
성공 : RES => {
// 워터 마크 처리
res.tempFilePaths.forEach (함수 (아이템) {
false로 _this.compress (아이템, '300', 함수 (RESS) {
_this.setData ( {
imagesurl : _this.data.imagesurl.concat (ress.tempFilePath)
/})
})
})
}
})
},
다음에, 우리는 댓글이 연구가 함께 진행 환영 문제가있다!