H-UI は画像のトリミングとアップロードを実装します (コード例)
H-UI は画像のトリミングとアップロードをどのように実装しますか?この章では、H-UI を使用して画像をトリミングしてアップロードする方法を説明します。一定の参考値があるので、困っている友達は参考にしていただければ幸いです。
これ以上ナンセンスではありません。コードに直接進みましょう:
HTML コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI 图片剪裁</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
</head>
<body>
<header class="hui-header">
<div id="hui-back"></div>
<h1 id="HUI-nbsp">HUI </h1>
</header>
<div class="hui-wrap">
<div id="hui-img-cuter-select">
<div id="hui-img-cuter-t1">+</div>
<div id="hui-img-cuter-t2">请选择图片</div>
</div>
</div>
<div id="hui-footer">
<button type="button" class="hui-button hui-fl" style="margin:2px 0px 0px 8px;" id="selectImgBtn">选择照片</button>
<button type="button" class="hui-button hui-primary hui-fr" style="margin:2px 8px 0px 0px;" id="uploadBtn">保存照片</button>
</div>
<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/hui-image-cuter.js" charset="UTF-8"></script>
<script type="text/javascript">
/*
huiImgCuter 参数
1. 宽度和高度的比例 高度 / 宽度 默认 1
2. 最终保存图片的宽度 默认 200px 高度根据宽高比自动调整
*/
var cuter = new huiImgCuter();
//绑定底部的选择按钮
cuter.bindSelect("#selectImgBtn");
//保存照片
hui('#uploadBtn').click(function() {
//获取图片数据
var imgData = cuter.getImgData();
if(!imgData) {
hui.toast('请选择图片');
return;
}
hui.loading('上传图片...');
/*
//上传到服务端演示代码
hui.post(
'http://192.168.31.188/uper.php',
{img:imgData},
function(data){
hui.closeLoading();
hui.toast('上传成功!');
}
);
*/
setTimeout(function() {
hui.toast('上传成功，演示的！');
hui.closeLoading();
}, 2000);
});
</script>
</body>
</html>サーバーサイド コード (uper.php)
<?php
if(!empty($_POST)){
if(isset($_POST['pd'])){
$_POST['pd'] = str_replace('data:image/png;base64,', '', $_POST['pd']);
$img = uniqid().'.png';
file_put_contents($img, base64_decode($_POST['pd']));
exit($img);
}
}
?>レンダリング:
要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。
以上がH-UI は画像のトリミングとアップロードを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7328
9
1626
14
1350
46
1262
25
1209
29
CakePHP フレームワークを使用して画像のアップロードと表示を実装する手順
Jul 29, 2023 pm 04:21 PM
CakePHP フレームワークを使用して画像のアップロードと表示を実装する手順 はじめに: 最新の Web アプリケーションでは、画像のアップロードと表示は一般的な機能要件です。 CakePHP フレームワークは、開発者に強力な機能と便利なツールを提供し、画像のアップロードと表示を簡単かつ効率的にします。この記事では、CakePHP フレームワークを使用して画像をアップロードして表示する方法を紹介します。ステップ 1: ファイル アップロード フォームを作成する まず、ユーザーが画像をアップロードするためのフォームをビュー ファイルに作成する必要があります。以下はその例です
WeChatアプレットは画像アップロード機能を実装
Nov 21, 2023 am 09:08 AM
WeChat アプレットが画像アップロード機能を実装 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業 コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。
PHPとVueを使って画像アップロード機能を実装する方法
Sep 25, 2023 pm 03:17 PM
PHP と Vue を使用して画像アップロード機能を実装する方法 現在の Web 開発では、画像アップロード機能は非常に一般的な要件です。この記事では、PHPとVueを使って画像アップロード機能を実装する方法と、具体的なコード例を詳しく紹介します。 1.フロントエンド部分（Vue） まずフロントエンドで画像をアップロードするためのフォームを作成する必要があります。具体的なコードは次のとおりです:<template><div><inputtype="fil
Vue テクノロジー開発における画像のアップロードと圧縮の処理方法
Oct 08, 2023 am 10:58 AM
Vue テクノロジ開発で画像のアップロードと圧縮を処理する方法 最新の Web アプリケーションでは、画像のアップロードは非常に一般的な要件です。ただし、ネットワーク送信とストレージの理由により、オリジナルの高解像度画像を直接アップロードすると、アップロード速度が遅くなり、ストレージ容量が大量に無駄になる可能性があります。したがって、画像のアップロードと圧縮は非常に重要です。 Vue テクノロジー開発では、いくつかの既製のソリューションを使用して画像のアップロードと圧縮を処理できます。 vue-upload-comoneの使い方を紹介します。
Vue 開発を使用するときに画像のアップロードとトリミングで発生する問題
Oct 08, 2023 pm 04:12 PM
タイトル: Vue 開発における画像のアップロードとトリミングの問題と解決策 はじめに: Vue 開発では、画像のアップロードとトリミングは一般的な要件です。この記事では、Vue 開発で遭遇する画像のアップロードとトリミングの問題を紹介し、解決策と具体的なコード例を示します。 1. 画像アップロードの問題: 画像アップロード ボタンを選択してもファイル選択ボックスをトリガーできません: この問題は通常、イベントが正しくバインドされていないか、バインドされたイベントが有効にならないことが原因で発生します。テンプレートでクリック イベントをバインドし、対応するメソッドでファイル選択ボックスをトリガーできます。コード例:
ThinkPHP6 を使用して画像をアップロードする方法
Jun 20, 2023 pm 09:25 PM
インターネットの発展に伴い、画像のアップロードは Web サイトやアプリケーションの開発に不可欠な機能になりました。 PHP の分野では、ThinkPHP6 は非常に人気のある開発フレームワークになっています。この記事では、ThinkPHP6を使用して画像アップロードを実装する方法を紹介します。 1. プロジェクトとコントローラーを作成する まず、新しい ThinkPHP6 プロジェクトを作成する必要があります。 Composer を使用してインストールすることも、公式 Web サイトから最新バージョンをダウンロードすることもできます。インストールが完了したら、コンソールに次のように入力します
Vue テクノロジー開発で画像のアップロードとトリミングを実装する方法
Oct 10, 2023 pm 12:46 PM
Vue テクノロジ開発で画像のアップロードとトリミングを実装する方法には、特定のコード サンプルが必要です。最新の Web 開発では、画像のアップロードと画像のトリミングは一般的な要件の 1 つです。人気のあるフロントエンド フレームワークとして、Vue.js はこれらの機能の実現に役立つ豊富なツールとプラグインを提供します。この記事では、Vue テクノロジー開発で画像のアップロードとトリミングを実装する方法を紹介し、具体的なコード例を示します。画像アップロードの実装は、画像の選択と画像のアップロードの 2 つのステップに分けることができます。 Vue では、サードパーティのプラグインを使用してこれを簡素化できます。
Vue開発における画像アップロードプレビューのモーダルボックス表示の問題を解決する方法
Jul 01, 2023 pm 01:13 PM
Vue 開発で画像アップロードのプレビュー モーダル ボックスが表示される問題を解決する方法 Vue 開発では、画像をアップロードしてプレビューする必要がよく発生します。この場合、よくある質問は、画像をアップロードした後、モーダル ボックスにプレビュー画像を表示する方法です。この記事では、この問題を解決する方法を紹介します。まず、ファイル アップロード入力要素を Vue コンポーネントに追加して、アップロードする画像ファイルを選択する必要があります。ファイルアップロードの変更イベントをリッスンすることで、ユーザーが選択した画像を取得できます
