一、先創建一個html文件,記得添加vue庫文件。
二、創建一盒容器vmdiv,用vue綁定它,測試vue綁定后的插入值text1效果。
三、加入文本框和兩個按鈕。
四、通過flex排序,讓它們三個豎排。比例為文本框占4,按鈕占1。
五、測試一下按鈕的點擊事件。
六、給文本框添加style樣式,給它字體大小為16px,并設置一個變量size,讓它來控制字的大小,通過點擊后,字變大加5,變小減5。
本例演示如何向 HTML 頁面添加背景圖片。
<html>
<body background="background.jpg">
<h3>圖像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果圖像小于頁面,圖像會進行重復。</p>
</body>
</html>
HTML基礎操作:圖片顯示
本文介紹使用微信小程序API+canvas來實現圖片的可拖動、放大、縮小和旋轉,并可對選中的圖片進行不同效果的濾鏡和不同形狀的切圖,且可對最終效果進行保存到本地。
1、文件index.wxml和index.wxss代碼如下,這一塊比較簡單,可自行查看,不做過多分析:
<view class='contentWarp'>
<block wx:for="{{itemList}}" wx:key="id">
<view class='touchWrap' style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
<view class='imgWrap {{item.active? "touchActive":""}}' style="transform: rotate({{item.angle}}deg); border: {{item.active?4*item.oScale:0}}rpx #fff dashed;">
<image src='{{item.image}}' data-id='{{item.id}}' style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd' mode="widthFix"></image>
<image class='x' src='../../images/del.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtap='deleteItem'></image>
<image class='o' src='../../images/scale.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
</view>
</view>
</block>
</view>
<!-- 右下角操作按鈕 -->
<view class="operation-buttons">
<image src="../../images/upload.png" bindtap="uploadImg"></image>
<image src="../../images/fliters.png" bindtap="toggleFliters"></image>
<image src="../../images/shapes.png" bindtap="toggleShapes"></image>
<image src="../../images/synthesis.png" bindtap="openMask"></image>
</view>
<!-- 各種過濾效果 -->
<view class="fliters" hidden="{{!showFliters}}">
<block wx:for="{{fliters}}" wx:key="id">
<image data-fliter="{{item.fliter}}" src="{{item.src}}" bindtap="imgEffects"></image>
</block>
</view>
<!-- 各種形狀 -->
<view class="shapes" hidden="{{!showShapes}}">
<block wx:for="{{shapes}}" wx:key="id">
<image data-shape="{{item.shape}}" src="{{item.src}}" bindtap="imgEffects"></image>
</block>
</view>
<!-- 保存顯示效果圖 -->
<view class='canvasWrap' hidden="{{!showCanvas}}">
<image class="resImg" bindlongtap="saveImg" src="{{canvasTemImg}}" mode="widthFix"></image>
<view class='btn_view'>
<button bindtap='saveImg'>保存到手機</button>
<button bindtap='disappearCanvas'>關閉</button>
</view>
</view>
<!-- 畫布 -->
<canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>
/**index.wxss**/
.contentWarp {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.touchWrap {
transform-origin: center;
position: absolute;
z-index: 100;
}
.imgWrap {
box-sizing: border-box;
width: 100%;
transform-origin: center;
float: left;
border: 5rpx transparent dashed;
}
.imgWrap image {
float: left;
}
.touchActive .x {
display: block;
}
.touchActive .o {
display: block;
}
.x {
position: absolute;
top: -25rpx;
left: -25rpx;
z-index: 500;
display: none;
width: 50rpx;
height: 50rpx;
overflow: hidden;
font-weight: bold;
color: #d1e3f1;
}
.o {
position: absolute;
bottom: -25rpx;
right: -25rpx;
width: 50rpx;
height: 50rpx;
text-align: center;
display: none;
overflow: hidden;
font-weight: bold;
color: #d1e3f1;
}
.active {
background-color: rgb(78, 114, 151);
}
.active view {
border: none;
}
.touchActive {
z-index: 400;
}
.operation-buttons {
position: absolute;
bottom: 100rpx;
right: 20rpx;
display: flex;
flex-direction: column;
z-index: 101;
}
.operation-buttons image {
width: 100rpx;
height: 100rpx;
margin-top: 40rpx;
}
.canvasWrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
text-align: center;
}
.maskCanvas {
position: absolute;
left: -200%;
top: 0;
}
.btnView view {
padding-bottom: 20rpx;
}
.hand {
position: absolute;
left: 100rpx;
right: 0;
margin: auto;
z-index: 100;
}
.getUserInfoBtn {
position: initial;
border: none;
background-color: none;
}
.getUserInfoBtn::after {
border: none;
}
.btn_view {
display: flex;
padding: 20rpx;
}
.btn_view button {
width: 210rpx;
font-size: 28rpx;
background-color: #eb4985;
color: #fff;
line-height: 80rpx;
}
.resImg {
width: 75%;
margin-top: 10px;
}
/* 特效樣式 */
.fliters {
display: flex;
flex-direction: column;
position: absolute;
bottom: 382rpx;
right: 120rpx;
z-index: 201;
}
.shapes {
display: flex;
flex-direction: column;
position: absolute;
bottom: 242rpx;
right: 120rpx;
z-index: 201;
}
.fliters image, .shapes image {
width: 60rpx;
height: 60rpx;
border: 2rpx solid #eb4985;
}
2、文件index.js存放所有功能的邏輯代碼,相對比較復雜,下面分開來分析幾個重點方法:
1)方法uploadImg+setDropItem:獲取上傳圖片的信息,跟設置的最大寬高進行判斷(maxWidth, maxHeight),然后根據判斷的結果進行縮放,避免大圖溢出,且設置圖片的地址、坐標、定位和是否選中等信息;用于后面功能使用,支持多圖使用;
2)方法WraptouchStart+WraptouchMove:獲取圖片移動坐標和觸發時坐標的差值,加上圖片本來的坐標來實現移動效果,注意要把移動坐標賦值給觸發時坐標(items[index].lx = e.touches[0].clientX),不然會導致移動有問題;
3)方法oTouchStart+oTouchMove:獲取拖動后圖片的半徑跟觸發時圖片的半徑的比值,再使用scale來實現縮放功能(items[index].disPtoO / items[index].r);獲取觸發時的圖片角度+拖動后圖片的角度,再使用rotate來實現旋轉功能(items[index].angle = items[index].rotate);
4)方法imgEffects:調用濾鏡方法util.imgFliters(詳細可到https://jingyan.baidu.com/article/ed15cb1b9fd9bb1be3698183.html查看),根據設置的濾鏡值,進行不同的濾鏡處理;而調用形狀方法util.imgShapes,根據設置的形狀值,進行不同的切圖效果;
5)方法synthesis:用來把所有圖片的最終效果合成一個畫布,用于保存圖片到本地使用;
6)方法saveImg:把畫布保存到本地相冊。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。